                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

為什么動(dòng)畫會(huì)一直轉(zhuǎn)動(dòng)

<html>

<head>

<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>

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>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

hnmw

2016-08-18

源自：JS動(dòng)畫效果 7-1

關(guān)注問(wèn)題我要回答

819

操作

收起

2 回答

Rimas
2016-08-24

兄弟你確定改對(duì)了嗎？我改了以后就正常了：

源代碼如下：

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(隨意)