???? 今天是我第一次寫博文，雖然我注冊有1年多了，但是很少在平時去總結自己的一些經驗，我在博客園學到了很多知識，在博客園這個大家庭里，使我深深的體會到，只有分享才會獲得更多的收獲，希望在今后得日子里能堅持多寫寫技術文章，多提升自己的技術，也希望能和大家共同進步！

??? 本人也是菜鳥，廢話不多說，貼上自己總結摸索的效果、代碼如下：

??? 效果：

<script type="text/javascript"> //向上滾動效果 function AutoScroll1(obj) {var scrollHeight=$("ul li:first").height(); if ($(obj).attr("name") != "hovered") { $(obj).find("#ul1").animate({marginTop: "-"+scrollHeight+"px" }, 1000, function() {$("ul:first li").eq(2).fadeIn(500);$("ul:first li:gt(3)").attr("style","background:#006699;display:block");$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);$("ul:first li:gt(2)").attr("style","background:#006699;display:none"); }); } }//向下滾動效果 function AutoScroll2() {if ($("#scrollDiv2").attr("name") != "hovered") {$("#scrollDiv2 #ul2 li:last").hide().insertBefore($("#scrollDiv2 #ul2 li:first").slideDown(1000));} }function HoverFun(obj) {$(obj).hover(function () {$(this).attr("name", "hovered");}, function () {$(this).removeAttr("name");}); }$(document).ready(function() {HoverFun("#scrollDiv1");HoverFun("#scrollDiv2");setInterval('AutoScroll1("#scrollDiv1")', 3000);setInterval("AutoScroll2()", 3000); }); </script> <style type="text/css"> ul, li { margin: 1px; padding: 0; height: 190px; width: 190px; color: White; font-size:24px; font-weight:bold; text-align:center; } .banner_little {height: 380px;line-height: 190px;overflow: hidden; } ul li {list-style-type:none; }</style> <div id="scrollDiv1" class="banner_little" style="margin-left:100px;position:absolute"><ul id="ul1"><li style="background:#006699">向上翻，第一行</li> <li style="background:#006699">向上翻，第二行</li><li style="background:#006699;display:none">向上翻，第三行</li><li style="background:#006699;display:none">向上翻，第四行</li></ul> </div><div id="scrollDiv2" class="banner_little" style="margin-left:400px;position:absolute"><ul id="ul2"><li style="background:#006699;">向下翻，第一行</li> <li style="background:#006699;">向下翻，第二行</li><li style="background:#006699;">向下翻，第三行</li><li style="background:#006699;">向下翻，第四行</li></ul> </div>

?

自己的能力有限，希望盡到了自己的綿薄之力，簡單實用！明天接著寫.......

您的支持是我最大的動力，如果你覺得還可以，請您給個”推薦“！

?

?

轉載于:https://www.cnblogs.com/Kummy/archive/2013/02/26/2934331.html

總結

以上是生活随笔為你收集整理的Juqery让世界更美好--超级简单实用的（上、下）自动翻的最佳效果，有图为证！...的全部內容，希望文章能夠幫你解決所遇到的問題。

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