jqueryベースのシームレススムーズスクロールプラグイン
まずjqueryクラスライブラリを導入し、プラグインパラメータを初期化します.設定しないでデフォルト値にします.初期化関数はul外層divにバインドされます(幅/高さとoverflow:hiddenを設定する必要があります).
ulの幅や外層divの高さを保証してこそ効果があります
注意:以上は垂直スクロールです.水平スクロールする場合は、プラグインのパラメータを変更してください(「rowHeight」/「margin-top」/「width()
ulの幅や外層divの高さを保証してこそ効果があります
$('#scroll').myScroll({
speed:40, // ,
rowHeight:24 //
})
注意:以上は垂直スクロールです.水平スクロールする場合は、プラグインのパラメータを変更してください(「rowHeight」/「margin-top」/「width()
(function($){
$.fn.myScroll = function(options){
//
var defaults = {
speed:40, // ,
rowHeight:24 //
};
var opts = $.extend({}, defaults, options),intId = [];
function marquee(obj, step){
obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
});
});
}
})(jQuery);