jquery向上无缝滚动第2种写法
这个效果jquery的基础，也没什么难写的。一直没怎么用到写这种效果，再加上现在用插件也方便，近日突然想在某面页想写一个向上无缝滚动，加一个小小的功能，纯手工写几行代码就行了，随手做一下记录一下,这是我对无缝滚动的理解, 分享给大家，这里只做一个向上无缝滚动的：会向上的，就会向下了！下面开始代码了，最终效果点（代码运行）来看：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #xw{ width: 500px; height: 40px; margin: 300px auto; border: 6px solid darkblue; position: relative; /*overflow: hidden;*/ } #xw ul{ position: absolute; bottom: -40px; left: 0; } #xw ul li{ list-style: none; width: 500px; height: 40px; line-height: 40px; text-align: center; color: white; } </style> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ setInterval(function(){ // 让第一个li高度变为0 // $('#hd ul li').first().css('heigth',"0px"); // height可以获得现在高度，也可以设置高度 没值()就是获得，(0)有值就是设置 $('#xw ul li').first().height(0); // 将第一个li追加到ul的最后 $('#xw ul').append($('#xw ul li').first()); //// 让最后一个li高度逐渐变为40 $('#xw ul li').last().animate({'height':'40px'},300); // 可以一句话写完 // $('#xw ul').append($('#xw ul li').first().height(0).animate({'height':'40px'},300)); },1000) }) </script> </head> <body> <div id="xw"> <ul> <li style="background: darkblue;">为什么俄罗斯姑娘结婚后身材迅速发福？涨知识了</li> <li style="background: darkcyan;">男子在海里泡太久 感觉手臂有东西 上岸后惊到众人</li> <li style="background: darkgoldenrod;">90后多少存款算合格？ 看了网友们回答不敢说话了</li> <li style="background: darkgreen;">23岁女子花1万5做腿部吸脂术 半年后腿上全是坑</li> <li style="background: darkmagenta;">那些老公身价过千万的女人，到底是长什么样的？</li> <li style="background: red;">穿搭技巧：有时候我们的颜色搭配要比款式更重要！</li> </ul> </div> </body> </html> 效果图：
原文链接：https://www.qiquanji.com/post/7784.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知