不好意思，刚才代码发错了，求大神指导，不然寝食难安，谢谢
慕粉18144024425
2017-01-11 23:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝网便民服务JS动画效果</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#move{
overflow: hidden;
border:1px solid #A2385A;
margin:100px auto;
width: 414px;
height: 354px;
}
a{
color: #999;
font-weight: bold;
font-family: "微软雅黑";
margin:20px;
display: inline-block;
padding-top: 112px;
height: 25px;
width: 92px;
text-align: center;
position: relative;
float: left;
text-decoration: none;
/* overflow: hidden; */
}
a:hover{
color: #E55757;
text-decoration: underline;
}
i{
position: absolute;
top:20px;
left:0;
filter:alpha(opacity:100);
opacity: 1;
}
</style>
<script src="js/move_1.js"></script>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById('move'),
a=div.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
a[i].onmouseover=function(){
var _this=this.getElementsByTagName('i')[0];
startmove(_this,{top:-25},function(){
startmove(_this,{top:20})
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="images/Taobao_1.jpg"></i><p>华为手机</p></a>
<a href="#"><i><img src="images/Taobao_2.jpg"></i><p>苹果手机</p></a>
<a href="#"><i><img src="images/Taobao_3.jpg"></i><p>小米手机</p></a>
<a href="#"><i><img src="images/Taobao_4.jpg"></i><p>魅族手机</p></a>
<a href="#"><i><img src="images/Taobao_1.jpg"></i><p>金立手机</p></a>
<a href="#"><i><img src="images/Taobao_1.jpg"></i><p>三星手机</p></a>
</div>
</body>
</html>
现在在不加透明度的情况下，可以实现当鼠标滑过时图片向上偏移后回到原来的位置，但是前后加上透明度之后，透明度回不到opacity：1了，而且也看不到图片回到原来位置的效果，也就是说加了透明度之后没有效果，求指导，谢谢
2回答
-
- qq_巧克力人生
- 2017-01-13 18:35:27
function startMove(obj,json,fn)
{
clearInterval(obj.timer);
var flag = true;/*flag作为判断每个运动是否都完成的标志*/
obj.timer = setInterval(function(){
for(var attr in json)
{
var temp = 0;
if(attr =="opacity")
{
temp = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
temp = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - temp)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(temp != json[attr])
{
flag = false;
}
if(attr=="opacity")
{
obj.style.filter = "alpha(opacity:"+temp+ speed+")";
obj.style. opacity= (temp+ speed)/100;
}
else
{
obj.style[attr] = temp+ speed +"px";
}
}
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},30);
}
这是我的startMove()函数
-
- qq_巧克力人生
- 2017-01-13 18:34:04
<script src="js/move_1.js"></script> 检查一下startmove()函数在透明度那一块有没有写错。
JS动画效果
113925 学习 · 1443 问题
相似问题