js文字列表滚动鼠标悬浮停止

js文字列表滚动鼠标悬浮停止

js代码

//js代码
(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);
$(function(){$(".gundong").myScroll({speed:20,rowHeight:24});
});

html代码

<div class="demo"><h2>超过列表长度，自动滚动</h2><div class="gundong"><ul><li><em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p></li><li><em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p></li><li><em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p></li><li><em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p></li><li><em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p></li><li><em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p></li><li><em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p></li><li><em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p></li><li><em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p></li><li><em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p></li><li><em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p></li><li><em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p></li></ul></div><h2>超过列表长度，不自动滚动</h2><div class="gundong"><ul><li><em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p></li><li><em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p></li><li><em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p></li><li><em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p></li></ul></div>
</div>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！