jquery动画在谷歌浏览器无效，其他浏览器都没有问题
//jquery请不要用远程引入的
//动画效果在谷歌浏览器中 无效 其他浏览器都实现了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.wrap {
width: 100px;
height: 100px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
ul {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
li {
float: left;
width: 100px;
height: 100px;
list-style: none;
font-size: 30px;
font-weight: bolder;
}
.item1 {
background: red;
}
.item2 {
background: green;
}
.item3 {
background: orange;
}
.item4 {
background: blue;
}
.item5 {
background: black;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="jquery.js"></script>
<script type="text/javascript" src="js.js">
</script>
</body></html>
//以下是js可以直接粘贴运行
$(function() {
/*为什么我这样写，在谷歌里面只会移动一个画面*/
/* li的宽度*/
var liw = $('li').width();
/* li的个数*/
var lin = $('li').length;
var index = 0;
/* 定时器*/
var timer = null;
/*给ul设置宽度*/
$('ul').css({
width: liw * lin + 'px'
});
/*每2秒移动一次*/
$('ul').hover(function() {
clearInterval(timer);
}, function() {
timer = setInterval(move, 2000);
}).trigger('mouseleave');
function move() {
index++;
left = index * liw;
if (index == 5) {
index = 0;
} else {
$('ul').stop(true, false).animate({
/*每次移动的距离*/
left: -left
}, 300);
}
};
})
我家在玉堆0回答
随时随地看视频慕课网APP
相关分类
JQuery
JavaScript