Jquery文字滚动效果
2016-06-15 00:19
1011 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;list-style:none;} #div1{width:100px;height:20px;background: red;overflow: hidden;position: relative;} #div1 ul{width:100px;background: red;position: absolute;top:0;} #div1 ul li{width:100px;height:20px;background: red;} </style> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script> $(function(){ var $aLi = $('#div1 ul li'); var $oUl= $('#div1 ul'); var timer = null; var num = 0; timer = setInterval(next,500) function next(){ $('#div1 ul').delay(2000).animate({'top':$aLi.height()},1000,function(){ $('#div1 ul li:eq(0)').appendTo($('#div1 ul')) $('#div1 ul').css({'top':0}) }); // console.log(num); } }); </script> </head> <body> <div id="div1"> <ul> <li>111111111111</li> <li>222222222222</li> <li>333333333333</li> <li>444444444444</li> <li>555555555555</li> <li>666666666666</li> <li>777777777777</li> <li>888888888888</li> <li>999999999999</li> </ul> </div> </body> </html>
相关文章推荐
- jquery右下角弹出提示框
- jquery右下角弹出提示框
- jquery validation用法
- JQuery 淡入淡出3
- JQuery 淡入淡出1
- JQuery 淡入淡出2
- 米到环球-地址栏-单选框的jquery处理,非典型的tab选项卡处理思维
- 自定义裁剪和缩放图像的jQuery插件Cropit使用的大坑
- jquery 判断一组checkbox是否被选中
- 解决jquery的scrollTop()置顶的浏览器兼容
- Jquery 文本 精确查找
- jquery获取所有选中的checkbox
- 开发自己的JQuery框架
- 使用jquery插件 jquery.table2excel.js 将页面中的表格下载到本地(excel格式)
- jquery循环遍历radio单选按钮,并设置选中状态
- 优秀jquery幻灯片插件汇总
- jQuery中的动画
- jQuery 菜单项切换
- JQuery 封装的应用 还是注册
- jQuery 全选