Нужна помощь в анимировании.
Вложений: 1
Здравствуйте!
Сразу оговорюсь, что в JavaScript'инге я новичок. Мне необходимо сделать страничку с 4-мя анимированными эл-тами (смена слайдов). При этом для каждого эл-та должна быть своя схема смены слайдов. Проблема в том, что я не знаю как заставить скрипт различать эти эл-ты. Про :last/:nth-child и прочее знаю (но что-то не получается при их помощи это сделать). Использую jQuery и модификацию плагина MobilySlider. Ниже используемый скрипт (версия с единой схемой смены слайдов для всех). Во вложении архив со страничкой. /* ========================================================== * Modified by unknown newbie in JavaScript. * Original source-code: * [url]http://playground.mobily.pl/jquery/mobily-slider.html[/url] * MobilySlider date: 20.1.2010 last update: 02.02.2011 * By Marcin Dziewulski * web: [url]http://www.mobily.pl[/url] or [url]http://playground.mobily.pl[/url] * email: [email]hello@mobily.pl[/email] * Free to use under the MIT license. * ========================================================== */ ($(document).ready(function($){ $.fn.mobilyslider=function(options){ var defaults={ content:".sliderContent", children:"div", transition:"horizontal", animationSpeed:300, autoplay:false, autoplaySpeed:3000, pauseOnHover:false, prev:"prev", next:"next", animationStart:function(){}, animationComplete:function(){} }; var sets=$.extend({},defaults,options); return this.each(function(){ var $t=$(this), item=$t.children(sets.content).children(sets.children), l=item.length-1, w=item.width(), h=item.height(), step=0, i=-1, //счетчик m=[1,2,3,4], //этот массив задает схему смены слайдов play, z, active; var slider={init:function(){ slider.data(); if(sets.autoplay){slider.autoplay()}slider.triggers() }, data:function(){ item.each(function(i){$(this).css("z-index",-(i-l))}); if(sets.transition=="fade"){item.hide().eq(0).show()} }, zindex:{ //отвечает за смену z-index next:function(){ item.css("z-index",l+1).eq(step).css("z-index",l+3).prev(item).css("z-index",l+2) }, trigger:function(){ if(z==1){ slider.zindex.next() } } }, slide:{ //этот метод выплняет анимацию left:function(sign){ sets.animationStart.call(this);item.stop(true, true).eq(step).animate({left:sign+"="+w}, sets.animationSpeed,function(){slider.zindex.trigger()}).animate({left:0}, sets.animationSpeed+200,function(){sets.animationComplete.call(this)}) }, top:function(sign){ sets.animationStart.call(this);item.stop(true, true).eq(step).animate({top:sign+"="+h}, sets.animationSpeed,function(){slider.zindex.trigger()}).animate({top:0}, sets.animationSpeed+200,function(){sets.animationComplete.call(this)}) }, fade:function(){ sets.animationStart.call(this); item.stop(true, true).fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed, function(){sets.animationComplete.call(this)}) } }, animation:{ //этот метод выбирает способ анимации next:function(){ step==l?step=0:step++;z=1; switch(m[i]){ //в зависимости от выбранного значения в массиве (от 1 до 5) case 1:slider.slide.left("-"); //смена слайда слева направо break; case 2:slider.slide.top("+"); //смена слайда сверху вниз break; case 3:slider.slide.left("+"); //справа налево break; case 4:slider.slide.top("-"); //снизу вверх break; case 5:slider.slide.fade(); //растворение break } } }, autoplay:function(){ play=setInterval(function(){ i>=3?i=0:i++; //выбор шага схемы смены слайда slider.animation.next(); },sets.autoplaySpeed) }, pause:function(){clearInterval(play)}, triggers:function(){ if(sets.pauseOnHover){ //пауза по наведению $t.hover(function(){slider.pause()}, function(){slider.autoplay()}) } } }; slider.init() }) } } (jQuery)) ); |
Я тоже любитель и программирую анимации давно, но не использую библиотек, а все делаю на чистом javascript. Могу без труда сделать любую схему переходов и сколько угодно анимаций. Но вам ведь наверно так не интересно. Библиотеки - это кандалы, в них не побегаешь. Удобство мнимое, а кода меньше не становится. Посмотрите примеры на моем сайте vikohn.narod.ru. Там есть статьи как я это делаю. Если будут вопросы, могу ответить.
|
Ок. Посмотрю.
Я прекрасно понимаю что за использование библиотеки платишь увеличением кода. Но, как я сказал я новичок, javascript знаю плохо, вот и приходится библиотекой обходиться. Есть еще одна причина: я смотрел видеокурсы попова. Оттуда и узнал про jQuery. Сами курсы только для полных новичков подходят. Даже я когда смотрел, чувствовал, что они очень примитивные и слабые. |
Библиотек очень много как текстовых редакторов. Фактически каждый программист может написать свою библиотеку. Я тоже стараюсь делать универсальные функции и сайты-шаблоны, которыми можно пользоваться ничего не зная и не умея. А дальше встает выбор: что проще, найти готовое или самому сделать.
|
Часовой пояс GMT +3, время: 05:19. |