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 };