<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
#pic {
width: 300px;
margin: 10px auto;
border: 1px solid #ccc;
background-color: pink;
}
#pic a {
display: inline-block;
width: 58px;
height: 25px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding: 40px 0px 10px 0px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 30px;
overflow: hidden;
}
#pic a i {
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
fliter: alpha(opacity: 100);
opacity: 1;
}
#pic a:hover {
color: #F00;
}
#pic img {
border: none;
}
</style>
<script type="text/javascript" src="js/moves.js"></script>
<script>
window.onload = function() {
var Pic = document.getElementById('pic');
var aList = Pic.getElementsByTagName('a');
for(var i = 0; i < aList.length; i++) {
aList[i].onmouseover = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this, {top: -60,opacity: 0}, function() {
_this.style.top = 60 + 'px';
startMove(_this, {top: 0,opacity: 100});
});
}
}
}
</script>
</head>
<body>
<div id="pic">
<a href="#"><i><img src="img/kkx.jpg" style="width: 58px;height: 60px;"/></i>
<p>1</p>
</a>
<a href="#"><i><img src="img/sm.jpg" style="width: 58px;height: 60px;"/></i>
<p>2</p>
</a>
<a href="#"><i><img src="img/mr.jpg" style="width: 58px;height: 60px;"/></i>
<p>3</p>
</a>
<a href="#"><i><img src="img/zz.jpg" style="width: 58px;height: 60px;"/></i>
<p>4</p>
</a>
<a href="#"><i><img src="img/you.jpg" style="width: 58px;height: 60px;"/></i>
<p>5</p>
</a>
<a href="#"><i><img src="img/ban.jpg" style="width: 58px;height: 60px;"/></i>
<p>6</p>
</a>
</div>
</body>
</html>
兄弟你确定改对了吗？我改了以后就正常了：
源代码如下：
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
#pic {
width: 300px;
margin: 10px auto;
border: 1px solid #ccc;
background-color: pink;
}
#pic a {
display: inline-block;
width: 58px;
height: 25px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding: 40px 0px 10px 0px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 30px;
overflow: hidden;
}
#pic a i {
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
fliter: alpha(opacity: 100);
opacity: 1;
}
#pic a:hover {
color: #F00;
}
#pic img {
border: none;
}
</style>
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function() {
var Pic = document.getElementById('pic');
var aList = Pic.getElementsByTagName('a');
for(var i = 0; i < aList.length; i++) {
aList[i].onmouseenter = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this, {top: -60,opacity: 0}, function() {
_this.style.top = 60 + 'px';
startMove(_this, {top: 0,opacity: 100});
});
}
}
}
</script>
</head>
<body>
<div id="pic">
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>1</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>2</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>3</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>4</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>5</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>6</p>
</a>
</div>
</body>
</html>move.js:
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
} else {
icur = parseInt(getStyle(obj,attr));
}
var speed =0;
speed = (json[attr]-icur)/10;
speed = speed >0?Math.ceil(speed):Math.floor(speed);
if(json[attr] != icur ){
flag = false;
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style[attr] = (icur+speed)/100;
} else {
obj.style[attr] = icur + speed +'px';
}
}
}
if(flag) {
clearInterval(obj.timer);
if(fn){
fn();
}
}
},10);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj,false)[attr];
}
}图片：a.jpg(随意)
你把onmouseover改成onmouseenter
onmouseover：只要鼠标移动就会触发，因此会重复触发