html文字整体向上滚动代码,jQuery插件实现文字无缝向上滚动效果代码

本文实例讲述了jQuery插件实现文字无缝向上滚动效果代码。分享给大家供大家参考，具体如下：

此插件旨在实现目前较为流行的无缝向上滚动特效，当鼠标移动到文字上时，向上滚动会停止，当鼠标离开时，向上滚动继续。整体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无缝向上滚动

*{margin:0;padding:0;font-size:12px;}

li{list-style:none;}

.box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:10px;overflow:hidden;}

.box ul li{line-height:25px;}

• 01这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 02这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 这是一个无缝向上滚动的特效，是我第一次写这样的插件
• 这是一个无缝向上滚动的特效，是我第一次写这样的插件

/*

* scrollTop 0.1

* Dependence jquery-1.7.1.js

*/

;(function($){

$.fn.scrollTop = function(options){

var defaults = {

speed:30

}

var opts = $.extend(defaults,options);

this.each(function(){

var $timer;

var scroll_top=0;

var obj = $(this);

var $height = obj.find("ul").height();

obj.find("ul").clone().appendTo(obj);

obj.hover(function(){

clearInterval($timer);

},function(){

$timer = setInterval(function(){

scroll_top++;

if(scroll_top > $height){

scroll_top = 0;

}

obj.find("ul").first().css("margin-top",-scroll_top);

},opts.speed);

}).trigger("mouseleave");

})

}

})(jQuery)

$(function(){

$(".box").scrollTop({

speed:30 //数值越大 速度越慢

});

})

希望本文所述对大家jQuery程序设计有所帮助。