<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝案例</title>
<style>
#move{
width: 300px;
border:1px solid #ccc;
margin:0 auto;
padding:10px;
overflow: hidden;
}
#move a{
display: inline-block;
width: 58px;
height: 25px;
border:1px solid #ddd;
border-radius: 3px;
text-align: center;
margin:10px 17px;
position: relative;
padding-top: 40px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#move a i{
position: absolute;
top: 10px;
left: 0;
display: inline-block;
width: 100%;
filter:alpha(opacity=100);
opacity: 1;
}
#move a p{
margin-top: 0;
}
#move a:hover{
color: #f00;
}
#move img {
width:30px;
height:30px;
border:none;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var omove=document.getElementById("move");
var as=omove.getElementsByTagName("a");
for(var i=0;i<as.length;i++){
as[i].onmouseover=function(){
var _this=this.getElementsByTagName("i")[0];
startMove(_this,{top:-25,opacity:30},function(){
_this.style.top=20+"px";
startMove(_this,{top:5,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="image/披萨.png" alt="pisa"/></i><p>披萨</p></a>
<a href="#"><i><img src="image/棒冰.png" alt="ice"/></i><p>棒冰</p></a>
<a href="#"><i><img src="image/热狗.png" alt="hotdog"/></i><p>热狗</p></a>
<a href="#"><i><img src="image/牛油果.png" alt="frult"/></i><p>牛油果</p></a>
<a href="#"><i><img src="image/甜甜圈.png" alt="pisa"/></i><p>甜甜圈</p></a>
<a href="#"><i><img src="image/草莓.png" alt="stroyberry"/></i><p>草莓</p></a>
<!--<a href="#" class="fl"><i><img src="image/蛋糕.png" alt="cake"/></i><p>蛋糕</p></a>
<a href="#" class="fl"><i><img src="image/饼干.png" alt="cookie"/></i><p>饼干</p></a>
<a href="#" class="fl"><i><img src="image/马卡龙.png" alt="makalong"/></i><p>马卡龙</p></a>-->
</div>
</body>
</html>move.js
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//startMove(obj,{attr1:target1,attr1:target1,attr1:target1…},fn)
function startMove(obj,json,fn){
//清除定时
clearInterval(obj.timer);
//定时器
obj.timer=setInterval(function () {
var flag=true;
for(var attr in json){
//获取样式
var icr=0;
if(attr=="opacity")
{
icr=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
icr=parseInt(getStyle(obj,attr));//注意返回的是有单位的要用parseInt取其数值
}
//计算速度
var speed=(json[attr]-icr)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测停止
if(icr!=json[attr])
{
flag=false;
}
if(attr=="opacity")
{
obj.style.opacity=(icr+speed)/100;
obj.style.filter="alpha(opacity:"+(icr+speed)+")";
}
else
{
obj.style[attr]=icr+speed+"px";
}
}
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},20);
}我也遇见过这种情况，根据我的观察应该和鼠标的位置有关。事件判断的条件是a的mouseover，而a标签里有很多子标签，每个子标签都可以触发a的onmouseover事件。你可以在审查中通过对标签区域的观察来看看究竟是不是这样。。。。至于解决方案，我目前还没改出来