不知道为什么透明度变不了目标值，是不是starMove这个函数存在问题？移进去的时候透明度就变不了0，最后也变不了100？？？？
慕粉1703136593
2017-03-12 17:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阿里巴巴</title>
<script type="text/javascript">
window.onload=function () {
var adiv=document.getElementById('move');
var alist=adiv.getElementsByTagName("a");
for (var i = 0; i <alist.length; i++) {
alist[i].onmouseover=function () {
var _this=this.getElementsByTagName("i")[0];
startMove(_this,{top:-20,opacity:0},function(){
_this.style.top=20+"px";
startMove(_this,{top:15,opacity:100});
})
}
}
}
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 = (json[attr]-icur)/8
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (icur!=json[attr]) {
flag=false;}
if(attr=="opacity"){
obj.style.filter="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+"px";}
if (flag) {
clearInterval(obj.timer);
if (fn) {fn();
}
}
}
},30)
}
function getStyle(obj,attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else{return getComputedStyle(obj,false)[attr];}
}
</script>
<style type="text/css">
*{margin:0px;
padding: 0px;}
#move{width: 300px;
margin: 10px auto;
border:1px solid #ccc;
border-radius: 3px;
background-color:#DDD;
}
#move a{display: inline-block;
width: 58px;
height: 25px;
border:1px solid #ddd;
border-radius: 5px;
background-color: #fff;
margin:10px 17px;
position: relative;
padding-top: 40px;
color: #9c9c9c;
font-size: 12px;
overflow: hidden;
text-align: center;
}
#move a i{position: absolute;
top:15px;
left: 0;
display: inline-block;
width:100%;
text-align: center;
filter: alpha(opacity=100);
opacity: 1;
}
#move a:hover{color:#F00;}
#move img{
border:none;
}
</style>
</head>
<body>
<div id="move">
<a href="#"><i><img src="images/game.png"></i><p>游戏</p></a>
<a href="#"><i><img src="images/movie.png"></i><p>电影</p></a>
<a href="#"><i><img src="images/food.png"></i><p>美食</p></a>
<a href="#"><i><img src="images/lottery.png"></i><p>彩票</p></a>
<a href="#"><i><img src="images/travel.png"></i><p>旅行</p></a>
<a href="#"><i><img src="images/insurance.png"></i><p>保险</p></a>
</div>
</body>
</html>
1回答
-
- yclycl
- 2017-03-15 11:52:22
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json){
var par=0;
if(attr=='opacity'){
var par=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
var par=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-par)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(par!=json[attr]){
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(par+speed)+')';
obj.style.opacity=(par+speed)/100;
}else{
obj.style[attr]=par+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){ //检测是否有回调函数，有就执行
fn();
}
}
},30);
}这是老师的 你看看 可能我们的方法名称不一样
JS动画效果
113923 学习 · 1443 问题
相似问题
回答 1
回答 2