jquery跑马灯效果，ajax调取数据 - 刘阿毛
jquery跑马灯效果(ajax调取数据)
jq代码:
1 /**
2 * @classDescription 模拟Marquee，无间断滚动内容
3 * @author Aken Li(www.kxbd.com)
4 * @DOM
5 * <div >
6 * <ul>
7 * <li></li>
8 * <li></li>
9 * </ul>
10 * </div>
11 * @CSS
12 * #marquee {width:200px;height:50px;overflow:hidden;}
13 * @Usage
14 * $(\'#marquee\').kxbdMarquee(options);
15 * @options
16 * isEqual:true,//所有滚动的元素长宽是否相等,true,false
17 * loop: 0,//循环滚动次数，0时无限
18 * direction: \'left\',//滚动方向，\'left\',\'right\',\'up\',\'down\'
19 * scrollAmount:1,//步长
20 * scrollDelay:20//时长
21 */
22 (function($){
23
24 $.fn.kxbdMarquee = function(options){
25 var opts = $.extend({},$.fn.kxbdMarquee.defaults, options);
26
27 return this.each(function(){
28 var $marquee = $(this);//滚动元素容器
29 var _scrollObj = $marquee.get(0);//滚动元素容器DOM
30 var scrollW = $marquee.width();//滚动元素容器的宽度
31 var scrollH = $marquee.height();//滚动元素容器的高度
32 var $element = $marquee.children(); //滚动元素
33 var $kids = $element.children();//滚动子元素
34 var scrollSize=0;//滚动元素尺寸
35 var _type = (opts.direction == \'left\' || opts.direction == \'right\') ? 1:0;//滚动类型，1左右，0上下
36
37 //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
38 $element.css(_type?\'width\':\'height\',10000);
39 //获取滚动元素的尺寸
40 if (opts.isEqual) {
41 scrollSize = $kids[_type?\'outerWidth\':\'outerHeight\']() * $kids.length;
42 }else{
43 $kids.each(function(){
44 scrollSize += $(this)[_type?\'outerWidth\':\'outerHeight\']();
45 });
46 }
47 //滚动元素总尺寸小于容器尺寸，不滚动
48 if (scrollSize<(_type?scrollW:scrollH)) return;
49 //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
50 $element.append($kids.clone()).css(_type?\'width\':\'height\',scrollSize*2);
51
52 var numMoved = 0;
53 function scrollFunc(){
54 var _dir = (opts.direction == \'left\' || opts.direction == \'right\') ? \'scrollLeft\':\'scrollTop\';
55 if (opts.loop > 0) {
56 numMoved+=opts.scrollAmount;
57 if(numMoved>scrollSize*opts.loop){
58 _scrollObj[_dir] = 0;
59 return clearInterval(moveId);
60 }
61 }
62
63 if(opts.direction == \'left\' || opts.direction == \'up\'){
64 var newPos = _scrollObj[_dir] + opts.scrollAmount;
65 if(newPos>=scrollSize){
66 newPos -= scrollSize;
67 }
68 _scrollObj[_dir] = newPos;
69 }else{
70 var newPos = _scrollObj[_dir] - opts.scrollAmount;
71 if(newPos<=0){
72 newPos += scrollSize;
73 }
74 _scrollObj[_dir] = newPos;
75 }
76 }
77 //滚动开始
78 var moveId = setInterval(scrollFunc, opts.scrollDelay);
79 //鼠标划过停止滚动
80 $marquee.hover(
81 function(){
82 clearInterval(moveId);
83 },
84 function(){
85 clearInterval(moveId);
86 moveId = setInterval(scrollFunc, opts.scrollDelay);
87 }
88 );
89
90 });
91 };
92 $.fn.kxbdMarquee.defaults = {
93 isEqual:true,//所有滚动的元素长宽是否相等,true,false
94 loop: 0,//循环滚动次数，0时无限
95 direction: \'left\',//滚动方向，\'left\',\'right\',\'up\',\'down\'
96 scrollAmount:1,//步长
97 scrollDelay:20//时长
98
99 };
100 $.fn.kxbdMarquee.setDefaults = function(settings) {
101 $.extend( $.fn.kxbdMarquee.defaults, settings );
102 };
103 })(jQuery);CSS部分:
1 <style type="text/css">
2 * {margin:0;padding:0;}
3 body { font-size:12px;}
4 a {color:#333;}
5 ul {list-style:none;}
6 #marquee1 {position:absolute;top:80px;left:50px;width:310px;height:45px;overflow:hidden;background:#333;border:2px solid #333;}
7 #marquee1 ul li {float:left; padding:0 1px;}
8 #marquee1 ul li img {display:block;}
9
10 #marquee2 {position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden; background:#EFEFEF;}
11 #marquee2 ul li {float:left; padding:0 10px; line-height:25px;}
12
13 #marquee3 {position:absolute;top:150px;left:50px;width:60px;height:235px;overflow:hidden;background:#333;border:2px solid #333;}
14 #marquee3 ul li {float:left; padding:1px 0;}
15 #marquee3 ul li img {display:block;}
16 <!--从下往上滚动的css-->
17 #marquee4 {position:absolute;top:150px;left:400px;width:200px;height:200px; overflow:hidden;background:#EFEFEF;}
18 #marquee4 ul li {float:left; width:180px; padding:10px; line-height:20px;}
19 </style>
前台调用js部分:
1 <script type="text/javascript">
2 $(function(){
3 $(\'#marquee1\').kxbdMarquee({direction:\'right\'});
4 $(\'#marquee2\').kxbdMarquee({isEqual:false});
5 $(\'#marquee3\').kxbdMarquee({direction:\'down\'});
6 $(\'#marquee4\').kxbdMarquee({direction:\'up\',isEqual:false});//一般这个是常用的,从下往上滚动
7 });
8 </script>前台html部分:
1 <body> 2 <div > 3 <ul> 4 <li><img src="../images/01s.jpg" width="60" height="45" /></li> 5 <li><img src="../images/02s.jpg" width="60" height="45" /></li> 6 <li><img src="../images/03s.jpg" width="60" height="45" /></li> 7 <li><img src="../images/04s.jpg" width="60" height="45" /></li> 8 <li><img src="../images/05s.jpg" width="60" height="45" /></li> 9 <li><img src="../images/06s.jpg" width="60" height="45" /></li> 10 <li><img src="../images/07s.jpg" width="60" height="45" /></li> 11 <li><img src="../images/08s.jpg" width="60" height="45" /></li> 12 </ul> 13 </div> 14 15 <div > 16 <ul> 17 <li><a href="#">新闻公告一</a></li> 18 <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li> 19 <li><a href="#">新闻公告三新闻公告三</a></li> 20 <li><a href="#">新闻公告四新闻公告四新闻公告四</a></li> 21 <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li> 22 <li><a href="#">新闻公告六新闻公告六新闻公告六</a></li> 23 </ul> 24 </div> 25 26 <div > 27 <ul> 28 <li><img src="../images/01s.jpg" width="60" height="45" /></li> 29 <li><img src="../images/02s.jpg" width="60" height="45" /></li> 30 <li><img src="../images/03s.jpg" width="60" height="45" /></li> 31 <li><img src="../images/04s.jpg" width="60" height="45" /></li> 32 <li><img src="../images/05s.jpg" width="60" height="45" /></li> 33 <li><img src="../images/06s.jpg" width="60" height="45" /></li> 34 <li><img src="../images/07s.jpg" width="60" height="45" /></li> 35 <li><img src="../images/08s.jpg" width="60" height="45" /></li> 36 </ul> 37 </div> 38 <!--从下往上的html--> 39 <div > 40 <ul> 41 <li><a href="#">新闻公告一新闻公告一</a></li> 42 <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li> 43 <li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li> 44 <li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li> 45 <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li> 46 <li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li> 47 </ul> 48 </div> 49 </body>
经过测试,确实很好用.但有一点值得说明的.
如果是利用ajax调取后台数据后再利用marquee效果,需要将前台调取marquee的js写在ajax的回调函数callback里面才能实现效果.
因为这是ajax是个异步提交,发出ajax请求后,页面会继续加载,不会等返回结果的.所以不写在回调函数里面,是没有数据显示出来.
==================
补充一点,如果跑马灯里li跑一段时间就乱跳,记得给li高度..
- 上一篇 »HTML语法大全
- 下一篇 »javascript，DOM实例