2013-09-20 6 views
0

Я хочу создать JQuery плагин, который оживляет элементы, используя полосу прокрутки мне нужно изменить положение выбранного элемента с скроллингаНаписание плагина для анимации с помощью прокрутки

мне нужно что-то вроде этого:

$("#obj").scrollate(200,400,"left:100","left:400"); 

Затем мне нужно получить доступ к функции scroll для каждой функции? !!!

Я думаю, что этот код не будет работать, потому что функция .scroll не может быть объявлена ​​для каждого момента отдельно!

(function ($) { 
$.fn.scrollate = function (start,end) { 

//Some code 

    $(window).scroll(function() { 
     var spos = $(window).scrollTop(); 
     if (spos > start && spos < end) { 
      var progress = (1/(end - start)) * (spos - start); 

      // changing css using progress 
     } 
    } 
}) 

}) (JQuery);

+0

Вы говорите, что это работает, и вам интересно, правильно ли это? Или это не работает, как вы собираетесь? –

ответ

0
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>scroll demo</title> 
<style> 
div { 
color: blue; 
} 
p { 
color: green; 
} 
span { 
color: red; 
display: none; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
<div>Try scrolling the iframe.</div> 
<p>Paragraph - <span>Scroll happened!</span></p> 
<script> 
$("p").clone().appendTo(document.body); 
$("p").clone().appendTo(document.body); 
$("p").clone().appendTo(document.body); 
$(window).scroll(function() { 
$("span").css("display", "inline").fadeOut("slow"); 
}); 
</script> 
</body> 
</html> 

Дайте это попробовать. Его ссылка из базы знаний jquerys на .scroll();

Also- это может или не может помочь, но еще один рабочий пример с некоторыми HTML и CSS: http://lab.stephaneguigne.com/js/jquery-scrollsections/example/callbacks.html

+0

Спасибо, очень полезные примеры ... Но я хочу анимировать свойства CSS с помощью прокрутки. Затем мне нужно добавить этот эффект к нескольким объектам. каждый из которых имеет разделенный «$ (window) .scroll (function()». Это проблема. Я добавлю дополнительную информацию к вопросу – rostamiani

+0

Спасибо, да, я не думаю, что Im понимает в этом случае ясно. Чтобы .animate css w/jquery - попробуйте это http://jsfiddle.net/nick_craver/GELTP/ – Chris

0

Вы можете использовать плагин JQuery доступный для прокрутки jQuery scrollto

Она имеет опции для анимации прокрутки также

Смежные вопросы