<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> <style type="text/css"> * { margin:0px; padding:0px; } #demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px} #demo ul.line,#demo ul.mulitline{width:500px; height:300px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000} #demo ul.mulitline{height:300px} #demo li{text-indent:15px; font-size:12px; line-height:30px;list-style:none; display:block} </style> </head> <body> <form id="form1" runat="server"> <div id="demo"> <h2>单行应用</h2> <ul class="line"> <li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关<br />闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li> <li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li> <li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li> <li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li> <li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li> </ul> <!--//多行应用//--> <ul class="mulitline"> <li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li> <li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li> <li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li> <li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li> <li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li> </ul> </div> <input type="button" value="adsf" onclick="add()" /> </form> <script type="text/javascript"> $(function () { //单行应用 向下滚动 var wrap = $('ul.line'); //定义滚动区域 var interval = 3000; //定义滚动间隙时间 var moving; //需要清除的动画 wrap.hover(function () { clearInterval(moving); //当鼠标在滚动区域中时,停止滚动 }, function () { moving = setInterval(function () { var field = wrap.find('li:last'); var h = field.height(); wrap.prepend(field.css('marginTop', -h + 'px'));//将最后一个移到顶部，且不可见 field.animate({ 'marginTop': 0 }, 600)//显示出来 }, interval)//滚动间隔时间取决于_interval }).trigger('mouseleave'); }); $(function () { //多行应用 向下 var _wrap = $('ul.mulitline'); //定义滚动区域 var _interval = 3000; //定义滚动间隙时间 var _moving; //需要清除的动画 _wrap.hover(function () { clearInterval(_moving); //当鼠标在滚动区域中时,停止滚动 }, function () { _moving = setInterval(function () { var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的 var _h = _field.height(); //取得每次滚动高度 _field.animate({ marginTop: -_h + 'px' }, 600, function () {//通过取负margin值,隐藏第一行 _field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 }) }, _interval)//滚动间隔时间取决于_interval }).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动 }); function add() { var wrap = $("ul.line"); var field = wrap.find("li:last"); var h = field.height(); field.css('marginTop', -h + 'px'); wrap.prepend(field); field.animate({ marginTop: 0 }, 600); } </script> </body> </html>
原文发布于Mr.Think的个人博客: http://mrthink.net/js-jq-autoscroll-updown/
自己加了一个单行向下的
相关文章：