大佬教程收集整理的这篇文章主要介绍了jQuery实现自上而下滚动的公告栏(可悬停),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<!doctype html> <html> <head> <Meta charset="utf-8"> <title>文字公告滚动轮播-jq22.com</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> * { margin:0; padding:0; } li { list-style:none; } .news { height:35px; BACkground:#fff; overflow:hidden; } .news .t_news { height:20px; color:#2a2a2a; margin-top:15px; overflow:hidden; position:relative; width:500px; } .news .news_li,.swap { line-height:20px; display:inline-block; position:absolute; top:0; right:0; font-size:14px; text-align:right; color:#585858 } .news .swap { top:20px; } </style> </head> <body> <div class="news"> <div class="t_news"> <ul class="news_li"> <li>1 一只傻阿贝哟</li> <li>2 一只傻阿贝哟</li> <li>3 一只傻阿贝哟</li> <li>4 一只傻阿贝哟</li> <li>5 一只傻阿贝哟</li> </ul> <ul class="swap"></ul> </div> </div> <script> $(‘.swap‘).html($(‘.news_li‘).html()); x = $(‘.news_li‘); y = $(‘.swap‘); h = $(‘.news_li li‘).length * 20; //20为每个li的高度 var hh = $(‘.news_li li‘).length; if (hh > 1) //setTimeout(b,3000);//滚动间隔时间 现在是3秒 b(); b(); function b() { t = parseInt(x.css(‘top‘)); //alert(t) y.css(‘top‘,‘20px‘); x.animate({ top: t - 20 + ‘px‘ },‘slow‘); //20为每个li的高度 if (Math.abs(t) == h - 20) { //20为每个li的高度 y.animate({ top: ‘0px‘ },‘slow‘); z = x; x = y; y = z; } setTimeout(b,3000); //滚动间隔时间 现在是3秒 } </script> </body> </html>
以上是大佬教程为你收集整理的jQuery实现自上而下滚动的公告栏(可悬停)全部内容,希望文章能够帮你解决jQuery实现自上而下滚动的公告栏(可悬停)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。