当前位置 : 主页 > 网络编程 > JavaScript >

jquery.kxbdmarquee.js--@author Aken Li(www.kxbd.com)代码清晰可借鉴

来源:互联网 收集:自由互联 发布时间:2021-06-30
无缝滚动 /** * @classDescription 模拟Marquee,无间断滚动内容 * @author Aken Li(www.kxbd.com) * @DOM * * * * * * * @CSS * #marquee {overflow:hidden;width:200px;height:50px;} * @Usage * $("#marquee").kxbdMarquee(options); * @opt
无缝滚动
/**
 * @classDescription 模拟Marquee,无间断滚动内容
 * @author Aken Li(www.kxbd.com)
 * @DOM
 *    
 
  
 *        
  
    *
  • *
  • *
* * @CSS * #marquee {overflow:hidden;width:200px;height:50px;} * @Usage * $("#marquee").kxbdMarquee(options); * @options * isEqual:true, //所有滚动的元素长宽是否相等,true,false * loop:0, //循环滚动次数,0时无限 * direction:"left", //滚动方向,"left","right","up","down" * scrollAmount:1, //步长 * scrollDelay:20 //时长 */ (function ($) { $.fn.kxbdMarquee = function (options) { var opts = $.extend({}, $.fn.kxbdMarquee.defaults, options); return this.each(function () { var $marquee = $(this); //滚动元素容器 var _scrollObj = $marquee.get(0); //滚动元素容器DOM var scrollW = $marquee.width(); //滚动元素容器的宽度 var scrollH = $marquee.height(); //滚动元素容器的高度 var $element = $marquee.children(); //滚动元素 var $kids = $element.children(); //滚动子元素 var scrollSize = 0; //滚动元素尺寸 //滚动类型,1左右,0上下 var _type = (opts.direction == "left" || opts.direction == "right") ? 1 : 0; //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度 $element.css(_type ? "width" : "height", 10000); //获取滚动元素的尺寸 if (opts.isEqual) { scrollSize = $kids[_type ? "outerWidth" : "outerHeight"]() * $kids.length; } else { $kids.each(function () { scrollSize += $(this)[_type ? "outerWidth" : "outerHeight"](); }); } ; //滚动元素总尺寸小于容器尺寸,不滚动 if (scrollSize < (_type ? scrollW : scrollH)) { return; } ; //克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度 $element.append($kids.clone()).css(_type ? "width" : "height", scrollSize * 2); var numMoved = 0; function scrollFunc() { var _dir = (opts.direction == "left" || opts.direction == "right") ? "scrollLeft" : "scrollTop"; if (opts.loop > 0) { numMoved += opts.scrollAmount; if (numMoved > scrollSize * opts.loop) { _scrollObj[_dir] = 0; return clearInterval(moveId); } ; } ; if (opts.direction == "left" || opts.direction == "up") { var newPos = _scrollObj[_dir] + opts.scrollAmount; if (newPos >= scrollSize) { newPos -= scrollSize; } _scrollObj[_dir] = newPos; } else { var newPos = _scrollObj[_dir] - opts.scrollAmount; if (newPos <= 0) { newPos += scrollSize; } ; _scrollObj[_dir] = newPos; } ; }; //滚动开始 var moveId = setInterval(scrollFunc, opts.scrollDelay); //鼠标划过停止滚动 $marquee.hover(function () { clearInterval(moveId); }, function () { clearInterval(moveId); moveId = setInterval(scrollFunc, opts.scrollDelay); }); }); }; $.fn.kxbdMarquee.defaults = { isEqual: true, //所有滚动的元素长宽是否相等,true,false loop: 0, //循环滚动次数,0时无限 direction: "left", //滚动方向,"left","right","up","down" scrollAmount: 1, //步长-相当于速度 一次滚动多少距离 scrollDelay: 30 //时长--走一步的时长 }; //$.fn.kxbdMarquee.setDefaults = function (settings) { // $.extend($.fn.kxbdMarquee.defaults, settings); //}; })(jQuery); // $("#marquee2").kxbdMarquee.setDefaults({direction: "up", isEqual: false}); $("#marquee2").kxbdMarquee({direction: "up", isEqual: false});
QQ截图20171009111045.png
网友评论