js 实现文字列表滚动效果
2013-09-25 10:44
871 查看
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下:
html代码:
js代码:
html代码:
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:visited{color:#5e5e5e; text-decoration:none;} a:hover{color:#b52725;text-decoration:underline;} .clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;} body{font:12px/180% Arial, Helvetica, sans-serif;} /* ranklist */ .ranklist{height:200px;overflow:hidden;} .ranklist li{height:26px;line-height:26px; padding-bottom:10px; overflow:hidden;position:relative;padding:0 70px 0 30px;} .ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;} .ranklist li em{background-position:0 -16px;} .ranklist li.top em{background-position:0 0;color:#fff;} .ranklist li .num{position:absolute;right:0;top:0;color:#999;} </style> </head> <body> <div class="ranklist" id="ranklist"> <ul style="margin-top:0px;"> <li class="top"> <em>01</em><p><a href="http://www.17sucai.com/" target="_blank">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span class="num">32万下载</span> </li> <li class="top"> <em>02</em><p><a href="http://www.17sucai.com/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span class="num">32万下载</span> </li> <li class="top"> <em>03</em><p><a href="http://www.17sucai.com/" target="_blank">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p><span class="num">32万下载</span> </li> <li> <em>04</em><p><a href="http://www.17sucai.com/" target="_blank">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></p><span class="num">32万下载</span> </li> <li> <em>05</em><p><a href="http://www.17sucai.com/" target="_blank"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></p><span class="num">32万下载</span> </li> <li> <em>06</em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover图片插件制作鼠标滑过标题单个展开图片效果</a></p><span class="num">32万下载</span> </li> <li> <em>07</em><p><a href="http://www.17sucai.com/" target="_blank">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></p><span class="num">32万下载</span> </li> <li> <em>08</em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></p><span class="num">32万下载</span> </li> <li> <em>09</em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版</a></p><span class="num">32万下载</span> </li> <li> <em>10</em><p><a href="http://www.17sucai.com/" target="_blank">门户网站jquery广告控制flash或图片顶部广告显示隐藏</a></p><span class="num">32万下载</span> </li> </ul> </div>
js代码:
<script type="text/javascript"> var scrtime; function scrollTextList() { /// <summary> /// 滚动文字列表 /// </summary> scrtime = window.setInterval(function () { var $ul = $("#ranklist ul"); var liHeight = $ul.find("li:first").height(); $ul.animate({ marginTop: -liHeight + "px" }, 500, function () { $ul.find("li:first").insertAfter($ul.find("li:last")); $ul.css({ marginTop: 0 }); }); }, 2000); } $(function () { scrollTextList(); $("#ranklist").mouseover(function () { clearInterval(scrtime); }).mouseout(function () { scrollTextList(); }); }); </script>
相关文章推荐
- js实现文字列表无缝滚动效果
- Js 实现文字爬楼滚动效果 结合文本框
- js实现文字列表无缝向上滚动
- 实现Js文字滚动效果(代码)
- JS实现的新浪微博大厅文字内容滚动效果代码
- Js 实现文字爬楼滚动效果 结合文本框
- js实现的单行文本不间断无缝滚动效果(荧光屏文字 滚动效果)
- js实现文字滚动效果
- Scroll text - JS实现文字自动循环滚动效果
- JS实现倒计时和文字滚动的效果实例
- Js实现滚动变色的文字效果
- JS实现倒计时和文字滚动的效果实例
- JS实现超精简的链接列表在固定区域内滚动效果代码
- JS实现的文字间歇循环滚动效果完整示例
- JS实现title标题栏文字不间断滚动显示效果
- JS实现“鼠标控制局部文字滚动效果”研究
- js实现首尾相连的文字滚动效果
- JS实现Li列表的无缝垂直文字滚动代码
- JS实现超精简的链接列表在固定区域内滚动效果代码
- JS实现的新浪微博大厅文字内容滚动效果代码