bug：轻微高频的抖动
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<style>
.proListSub {
width: 1190px;
margin: 0px auto;
position: relative;
}
.proListSub .linkQy {
background: #fff;
padding: 30px 0px;
width: 1090px;
overflow: hidden;
margin: 20px auto;
position: relative;
height: 310px;
box-sizing: content-box;
}
.proListSub .linkQy ul.banFirst,.proListSub .linkQy ul.banLast{
overflow: hidden;
width: 300%;
position: absolute;
top: 30px;
left: 0px;
background: #fff;
list-style: none;
padding: 0px;
}
.proListSub .linkQy ul.banLast{
left: 100%;
}
.proListSub .linkQy ul.banFirst li,.proListSub .linkQy ul.banLast li{
float: left;
height: 250px;
text-align: center;
background: skyblue;
}
.proListSub .linkQy ul.banFirst>li>a,.proListSub .linkQy ul.banLast>li>a{
display: block;
text-align: center;
height: 100%;
}
.proListSub .linkQy ul.banFirst>li>a img,.proListSub .linkQy ul.banLast>li>a img{
height: 100%;
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="proListSub" id="lNav12">
<div class="linkQy">
<ul class="banFirst">
<li><a href=""><img src="img/5.jpg"/></a></li>
<li><a href=""><img src="img/55.jpg"/></a></li>
<li><a href=""><img src="img/33.jpg"/></a></li>
<li><a href=""><img src="img/44.jpg"/></a></li>
<li><a href=""><img src="img/55.jpg"/></a></li>
<li><a href=""><img src="img/6.jpg"/></a></li>
<li><a href=""><img src="img/77.jpg"/></a></li>
<li><a href=""><img src="img/1.jpg"/></a></li>
<li><a href=""><img src="img/2.jpg"/></a></li>
<li><a href=""><img src="img/4.jpg"/></a></li>
</ul>
<ul class="banLast"></ul>
</div>
</div>
</div>
<script src="static/js/jquery.js"></script>
<script>
var sum=0
for(var i = 0; i<$('.proListSub .linkQy>ul>li').length;i++){
sum+=$('.proListSub .linkQy>ul>li').eq(i).width()
}
$('.proListSub .linkQy>ul').css('width', sum)
$('.banLast').html($('.banFirst').html())
$('.banLast').css('left', $('.linkQy').width())
var speed = 18
function linkAnimate (firstAnimate, nextAnimate, parentNode) {
// 前一个移动距离只剩下最后一个父元素的宽度甚至更短
if (Math.abs(firstAnimate.position().left) >= (firstAnimate.width() - parentNode.width())) {
firstAnimate.stop().animate({
left: -firstAnimate.width()
}, (firstAnimate.width() + firstAnimate.position().left) * speed, 'linear', function () {
firstAnimate.css('left', parentNode.width())
})
nextAnimate.stop().animate({
left: 0
}, nextAnimate.position().left * speed, 'linear', function () {
linkAnimate(nextAnimate, firstAnimate, parentNode)
})
} else {
// 移动到仅剩下一个父元素宽度
firstAnimate.stop().animate({
left: -(firstAnimate.width() - parentNode.width())
}, Math.abs(Math.abs(firstAnimate.position().left) - (firstAnimate.width() - parentNode.width())) * speed, 'linear', function () {
// 将当前最后一个父元素宽度的长度全部运动到左侧,并迅速返回最右侧等待下一次移动
firstAnimate.stop().animate({
left: -firstAnimate.width()
}, parentNode.width() * speed, 'linear', function () {
firstAnimate.css('left', parentNode.width())
})
// 同时最右侧待定元素开始移动
nextAnimate.stop().animate({
left: 0
}, parentNode.width() * speed, 'linear', function () {
linkAnimate(nextAnimate, firstAnimate, parentNode)
})
})
}
}
linkAnimate($('.banFirst'), $('.banLast'), $('.linkQy'))
$('.linkQy').on('mouseenter', function () {
$(this).children().stop(true, false)
})
$('.linkQy').on('mouseleave', function (e) {
if ($(this).children().eq(0).position().left <= 0) {
linkAnimate($(this).children().eq(0), $(this).children().eq(1), $(this))
} else {
linkAnimate($(this).children().eq(1), $(this).children().eq(0), $(this))
}
})
</script>
</body>
</html>
1531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
