Jquery文字一行一行向上滚动 效果是用了Jquery中animate这个方法实现的 相对来说是蛮简单的 虽然是简单点 还是要分享下 基本原理就是:运用了一个小技巧 滚动的高度和每个li的高度一样的,先找到外层ul的容器 然后相对于外层的容器进行向上滚动 ul在css里面没有设置他的高度 默认情况下是n个li×li的高度 向上是marginTop: -li.height(每个li的高度);
* 当滚动到最后一个li时候 那么最外层的容器应该滚动到0了 那么我就把第一个li加到ul里面去 这样就实现了循环滚动
* 而不会滚动到最后一个就停止下来了 基本的HTML/CSS如下
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Untitled Document</title>
- <style type="text/css">
- ul,li{list-style:none; margin:0; padding:0;}
- .scroll{ width:500px; height:175px; overflow:hidden; border:1px solid #333; margin:50px auto 0;}
- .scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden;}
- .scroll li a{ font-size:14px; font-family:"宋体";color:#333; text-decoration:none;}
- .scroll li a:hover{ text-decoration:underline;}
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- </head>
- <body>
- <div class="scroll">
- <ul class="list">
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- <li><a href="#" target="_blank">我来博主的空间了</a></li>
- </ul>
- </div>
- <script type="text/javascript" src="index.js"></script>
- </body>
- </html>
JS代码如下:
-
-
-
-
-
-
-
-
-
-
- function autoScroll(obj){
- $(obj).find(".list").animate({
- marginTop : "-25px"
- },500,function(){
- $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
- })
- }
- $(function(){
- setInterval('autoScroll(".scroll")',3000)
分享到:
相关推荐
jquery向上循环滚动特效是一款文字行向上循环滚动jquery插件,兼容主流浏览器。
实现文字一行一行的向上或者向下的滚动的播放,一定要给外部的div一个height值,否则没效果
js文字滚动插件制作一个js文字滚动效果,两排双行关联向上文字间隙滚动,支持多组文字滚动列表。内含js代码下载。
本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码。分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动...
jquery向上循环滚动特效是一款文字行向上循环滚动jquery插件,兼容主流浏览器。
jquery上下左右图片无缝滚动代码是一款jquery图片无缝滚动插件。
本文主要分享了javascript实现向上文字轮播功能的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
您可能感兴趣的文章:jquery单行文字向上滚动效果的实现代码jquery 页眉单行信息滚动显示实现思路及代码c#删除代码中的单行注释行示例js实现单行文本向上滚动效果实例代码jQuery实现单行文字间歇向上滚动源代码js...
JS DS的卷轴通过滚动事件滚动到jquery对象...关于当用户在baseOfElements对象中配置HTML DOM元素数组中的下一个或上一个元素向下或向上滚动任意行时与scrollify或其他基于jquery的插件相比,在当前页面中实现起来更容易
当文本的第一行消失时,另一行文本将出现在任务窗格的底部。 这种类型的操作适合显示RSS提要中的新闻标题,或在大小禁止显示更多详细信息时滚动的其他信息。 图1显示了带有新闻标题行的任务窗格。 该示例演示如何...
当然一行代码就解决了兼容问题 代码如下:var mousewheel = document.all?”mousewheel”:”DOMMouseScroll”; 事件属性,IE是event.wheelDelta,Firefox是event.detail 属性的方向值也不一样,IE向上滚 > 0,Firefox...
再次添加侧边栏-新设置使侧边栏始终处于正确位置(因此您无需向上滚动即可看到它)-现代白色和现代风格现已成为默认配置-主题设置面板的较小更改-现在作者悬停了正在正确设置主题-设置面板现在正在正确设置主题-添加...