(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢(定时器设置的时间)
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options);
var intId = [];
function marquee(obj, liHeight){
obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var ulMargintop = Math.abs(parseInt($(this).css("margin-top")));
// $(this)指的是ul
if(ulMargintop >= liHeight){
$(this).find("li").slice(0, 1).appendTo($(this));
//将第一个li元素截取追加到ul末尾
//(appendTo方法:如果是已存在的元素,它将从当前位置被移除,并在被选元素的结尾被插入)
$(this).css("margin-top", 0);
}
});
}
// this表示ul父盒子
this.each(function(i){
var liHeight = opts["rowHeight"];
var speed = opts["speed"];
var _this = $(this);// this表示ul父盒子
console.log(i);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, liHeight);
}
}, speed);
//鼠标hover时清除定时器,移开继续
_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, liHeight);
}
}, speed);
});
});
}
})(jQuery);
文字轮播
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1.当tableView没数据时显示图片或文字 https://github.com/dzenbot/DZNEmp...