jQuery + css 公告从左往右滚动

 1 .notice-title {
 2             color: #fff;
 3         }
 4  
 5         .notice-content {
 6             position: relative;
 7             width: 800px;
 8             height: 30px;
 9             white-space: nowrap;
10             overflow: hidden;
11             float: left;
12             margin-left: 55px;
13             margin-top: -30px;
14  
15             /*背景透明度
16             background-color: #fff;
17             filter:alpha(opacity=10);
18             -moz-opacity:0.5;
19             -khtml-opacity: 0.5;
20             opacity: 0.5;
21             */
22         }
23         .notice-text {
24             color: red;
25             font-size: 14px;
26             position: absolute;
27         }
1 <div class="notice-title">公告:</div>
2 <div class="notice-content">
3     <div class="notice-text"><span>公告内容</span></div>
4 </div>
 1 $(function() {
 2     // 公告滚动
 3     $(".notice-content").textScroll();
 4 });
 5  
 6 /**
 7  * 从右往左滚动文字
 8  * @returns {undefined}
 9  */
10 $.fn.textScroll = function() {
11     // 滚动步长(步长越大速度越快)
12     var step_len = 60;
13     var this_obj = $(this);
14     var child = this_obj.children();
15     var this_width = this_obj.width();
16     var child_width = child.width();
17     var continue_speed = undefined;// 暂停后恢复动画速度
18     // 初始文字位置
19     child.css({
20         left: this_width
21     });
22  
23     // 初始动画速度speed
24     var init_speed = (child_width + this_width) / step_len * 1000;
25  
26     // 滚动动画
27     function scroll_run(continue_speed) {
28         var speed = (continue_speed == undefined ? init_speed : continue_speed);
29         child.animate({
30             left: -child_width
31         }, speed, "linear", function() {
32             $(this).css({
33                 left: this_width
34             });
35             scroll_run();
36         });
37     }
38  
39     // 鼠标动作
40     child.on({
41         mouseenter: function() {
42             var current_left = $(this).position().left;
43             $(this).stop();
44             continue_speed = (-(-child_width - current_left) / step_len) * 1000;
45         },
46         mouseleave: function() {
47             scroll_run(continue_speed);
48             continue_speed = undefined;
49         }
50     });
51  
52     // 启动滚动
53     scroll_run();
54 };

 

posted @ 2018-04-16 12:50  哟风  Views(154)  Comments(0)    收藏  举报