jQuery+css公告左から右へスクロール
2383 ワード
$(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;
}