Как переписать скрипт чтоб можно было создавать множество альбомов?

@Dimitrii · Регистрация: 20.04.2013

Author24 — интернет-сервис помощи студентам

Добрый день. Столкнулся с неприятной задачей. Есть такой вот код. создаю небольшой альбом с круговым меню. Возникла очевидная проблема- при добавлении второго такого и более начинается неправильная работа. Как лучше переписать скрипт код чтоб можно было создавать множество таких альбомов? мне нужно чтоб добавление происходило просто дописанием дива-контейнера и дивов-детей в нем, без необходимости писать что-то в скриптах при создании каждого нового экземпляра.

HTML5

<div class="circle-albom test">
        <div class="photocard noselect"><img src="src/images/image1.jpg">1</div>
        <div class="photocard noselect"><img src="src/images/image2.jpg">2</div>
        <div class="photocard noselect"><img src="src/images/image3.jpg">3</div>
        <div class="photocard noselect"><img src="src/images/image4.jpg">4</div>
        <div class="photocard noselect"><img src="src/images/image5.jpg">5</div>
        <div class="photocard noselect"><img src="src/images/image6.jpg">6</div>
        <div class="photocard noselect"><img src="src/images/image7.jpg">7</div>
        <div class="photocard noselect"><img src="src/images/image8.jpg">8</div>
         
        
    </div>

CSS

*{margin: 0;padding: 0;}
.circle-albom
{
    
    position: relative;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 50px;
    width: 500px;
    height: 500px;
    border: 1px solid black;
    border-radius: 5%;
     
    
}
.circle-albom .photocard
{
    position: absolute;
    width: 30%;
    height: 20%;
    bottom: 5%;
    left:35%;
    
    border-radius: 5%;
    transform-origin: 50% -120% 0; /* x y z */
    
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
 
.circle-albom .photocard img
{
 
    width: 100%;
    height: 100%;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

Javascript

var circle_albom=$(".circle-albom");
var photocard=$(".circle-albom .photocard");
var helpcolor,angle,rotate_stapse;
var positions,displacement; 
 
 
function loadcards()
{
 
    positions=[photocard.length];
    displacement=[photocard.length];
    angle=360/photocard.length;
    rotate_stapse=1;
    for(var i=0;i<photocard.length;i++)
    {
        $(photocard.get(i)).css("transform","rotate("+i*angle+"deg)");
        positions[i]=i;
        if(i<=photocard.length/2)
            {
                displacement[i]=0-i;
            }
        else
            {
                displacement[i]=photocard.length-i;
            }
    }
 
}
loadcards();
 
 
$( document ).ready(function(){$(photocard).css("transition","all 1s");});
 
photocard.click(function(){
   
  angle=360/photocard.length;
rotate_stapse=displacement[$(this).index()];
 for(var i=0;i<photocard.length;i++)
    {
        positions[i]=positions[i]+rotate_stapse;
        displacement[i]=displacement[i]-rotate_stapse;
        if(displacement[i]>=photocard.length/2)
            {
                displacement[i]=0-(photocard.length-displacement[i]);
            }
        if(displacement[i]<=0-(photocard.length/2))
            {
                displacement[i]=photocard.length+displacement[i];
            }
        $(photocard.get(i)).css("transform","rotate("+(positions[i])*angle+"deg)");
           
    }
    
 });

@kalabuni · 05.12.2018, 17:12

Dimitrii, попросите модераторов перенести тему в нужный раздел (jquery) -- кликните по красному треугольничку в стартовом посте и изложите в окошке эту просьбу

Новые блоги и статьи
Почему при инициализации массива 3х3х3 будет создано 13 одномерных массивов? Alexander-7 16.01.2025 При инициализации многомерного массива, в данном случае трехмерного массива размерностью 3x3x3, может возникнуть путаница относительно того, как структура данных организована в памяти. Общее число. . .	Использование связки C# и PHP в корпоративной разработке и микросервисной архитектуре InfoMaster 16.01.2025 Введение в интеграцию C# и PHP В современной корпоративной разработке все чаще возникает потребность в создании гибких и масштабируемых решений, способных эффективно решать широкий спектр. . .	Как использовать Kerio дома для управления сетью и пользователями InfoMaster 16.01.2025 Использование технологий для улучшения повседневной жизни стало неотъемлемой частью современного быта. Одной из таких технологий является Kerio — мощный инструмент для управления сетью и. . .	Есть ли будущее у DVD и Blu-ray? InfoMaster 16.01.2025 В эпоху стремительного развития цифровых технологий и повсеместного распространения потоковых сервисов вопрос о будущем физических носителей информации становится все более актуальным. Особенно остро. . .	Как проводить научные вычисления на Python InfoMaster 15.01.2025 Python стал одним из наиболее востребованных языков программирования в области научных вычислений благодаря своей простоте, гибкости и обширной экосистеме специализированных библиотек. Научные. . .	Создание игры типа Minecraft на PyGame/Python: пошаговое руководство InfoMaster 15.01.2025 В данном руководстве мы рассмотрим процесс создания игры в стиле Minecraft с использованием библиотеки PyGame на языке программирования Python. Этот проект идеально подходит как для начинающих. . .
Как создать свою первую игру в стиле Doom на Unreal Engine InfoMaster 15.01.2025 Разработка шутера от первого лица в стиле классического Doom представляет собой увлекательное путешествие в мир игрового программирования, где сочетаются творческий подход и технические навыки. . . .	Параллельное программирование: основные технологии и принципы InfoMaster 15.01.2025 Введение в параллельное программирование Параллельное программирование представляет собой фундаментальный подход к разработке программного обеспечения, который позволяет одновременно выполнять. . .	Как написать микросервис на C# с Kafka, MediatR, Redis и GitLab CI/CD InfoMaster 15.01.2025 В современной разработке программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот подход позволяет разделить сложную систему. . .	Что такое CQRS и как это реализовать на C# с MediatR InfoMaster 15.01.2025 Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .	Как настроить CI/CD с Azure DevOps InfoMaster 15.01.2025 CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .	Как настроить CI/CD с помощью Jenkins InfoMaster 15.01.2025 Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	05.12.2018, 17:12	2
	Dimitrii, попросите модераторов перенести тему в нужный раздел (jquery) -- кликните по красному треугольничку в стартовом посте и изложите в окошке эту просьбу 0