标签:
$(function() { // 公告滚动 $(".notice-content").textScroll(); }); /** * 从右往左滚动文字 * @returns {undefined} */ $.fn.textScroll = function() { // 滚动步长(步长越大速度越快) var step_len = 60; var this_obj = $(this); var child = this_obj.children(); var this_width = this_obj.width(); var child_width = child.width(); var continue_speed = undefined;// 暂停后恢复动画速度 // 初始文字位置 child.css({ left: this_width }); // 初始动画速度speed var init_speed = (child_width + this_width) / step_len * 1000; // 滚动动画 function scroll_run(continue_speed) { var speed = (continue_speed == undefined ? init_speed : continue_speed); child.animate({ left: -child_width }, speed, "linear", function() { $(this).css({ left: this_width }); scroll_run(); }); } // 鼠标动作 child.on({ mouseenter: function() { var current_left = $(this).position().left; $(this).stop(); continue_speed = (-(-child_width - current_left) / step_len) * 1000; }, mouseleave: function() { scroll_run(continue_speed); continue_speed = undefined; } }); // 启动滚动 scroll_run(); };
<div class="notice-title">公告:</div> <div class="notice-content"> <div class="notice-text"><span>公告内容</span></div> </div>
.notice-title { color: #fff; } .notice-content { position: relative; width: 800px; height: 30px; white-space: nowrap; overflow: hidden; float: left; margin-left: 55px; margin-top: -30px; /*背景透明度 background-color: #fff; filter:alpha(opacity=10); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; */ } .notice-text { color: red; font-size: 14px; position: absolute; }
标签:
原文地址:http://www.cnblogs.com/zllz5230/p/4586628.html