html:

<div class="rightbtm box">
?? ??? ??? ??? ??? ??? ?<div class="uls">
?? ??? ??? ??? ??? ??? ??? ?<p><a href="#"><span class="span1s">[出售信息]</span>樣品中心報名流程與操作指南</a></p>
?? ??? ??? ??? ??? ??? ??? ?<p><a href="#"><span class="span2s">[求購信息]</span>杭州農業有限公司求購牛奶300箱..</a></p>
?? ??? ??? ??? ??? ??? ??? ?<p><a href="#"><span class="span2s">[求購信息]</span>襄陽傲農現代常年求購車厘子..</a></p>
?? ??? ??? ??? ??? ??? ??? ?<p><a href="#"><span class="span3s">[轉讓信息]</span>余杭良渚街道一塊農林用地轉讓。</a></p>
?? ??? ??? ??? ??? ??? ??? ?<p><a href="#"><span class="span1s">[轉讓信息]</span>千島湖農家樂一處轉讓</a></p>
?? ??? ??? ??? ??? ??? ??? ?<p><a href="#"><span class="span2s">[出售信息]</span>10只大閘蟹 求買主</a></p>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>

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(".uls").height();
? ? ? ?obj.find(".uls").clone().appendTo(obj);
? ? ? ?obj.hover(function(){
? ? ? ?clearInterval($timer);
? ?},function(){
? ? ? ?$timer = setInterval(function(){
? ? ? ?scroll_top++;
? ? ? ?if(scroll_top > $height){
? ? ? ?scroll_top = 0;
? }
? ? ? ?obj.find(".uls").first().css("margin-top",-scroll_top);
? ? },opts.speed);
? ? }).trigger("mouseleave");
? ?})
? }
?})(jQuery);

?$(function(){
?$(".box").scrollTop({
? ? ?speed:60 //數值越大 速度越慢
?});
})

總結

以上是生活随笔為你收集整理的文字上下滚动的实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。