最新问题:
1.第一次滚动时,到后面速度突然变慢(为什么??),后面只要鼠标不移上去正常速度
2.为什么鼠标移上去后,速度有所下降???
代码如下,为什么对a监听鼠标移入事件不触发??
因为用了append,要做事件委托
该如何实现如题所述效果~~
html{
font-size:16px;
}
#notice {
height: 1.875rem;
font-size: 1rem;
line-height: 1.875rem;
color: #58637e;
margin-top: 1.875rem;
/* margin-top: 1.875rem; */
background: #f4f4f4;
}
#notice span {
display: block;
width: 22px;
height: 100%;
background: url(../img/index/notice.png) center center/22px 22px no-repeat;
margin-right: 10px;
}
#notice div.marquee {
display: block;
height: 100%;
width: 1136px;
width: 71rem;
overflow: hidden;
}
#notice div.marquee a {
width: auto;
height: 100%;
color: #666666;
display: inline-block;
text-decoration: none;
}
// 字幕滚动
startMarquee();
function startMarquee() {
var ele = $('.marquee a');
ele.css({
'margin-left': ele.parents().innerWidth() + 'px',
});
marquee();
}
function marquee() {
var ele = $('.marquee a');
var ele_width = ele.innerWidth();
console.log(parseInt(ele.css('margin-left')), parseInt(-(ele_width)));
if (parseInt(ele.css('margin-left')) <= parseInt(-(ele_width))) {
console.log(parseInt(ele.css('margin-left')) + '<=' + parseInt(-(ele_width)));
ele.css({
'margin-left': ele.parents().innerWidth() + 'px',
});
}
ele.animate({
marginLeft: -(ele_width) + 'px',
}, 5000, 'linear', marquee);
}
mousemoveStop($('.marquee a'));
function mousemoveStop(ele) {
$('.marquee').on('mouseover', ele, function () {
console.log('mouseover');
$('.marquee a').stop();
}).on('mouseleave', ele, function () {
console.log('mouseout');
marquee();
});
}