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

按視頻編寫(xiě)代碼后怎么運(yùn)行的時(shí)候要是快速劃過(guò)圖標(biāo)圖片是上去后不下來(lái)，這到底錯(cuò)在哪里？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS案例</title>
<style>
#move{
?? ?width:300px;
?? ?height:190px;
?? ?background-color:#CCC;
?? ?margin:10px auto;
?? ?border:1px solid #ccc;}
#move a{
?? ?display:inline-block;
?? ?width:58px;
?? ?height:30px;
?? ?border:1px solid #ddd;
?? ?border-radius:3px;
?? ?background-color:#fff;
?? ?text-align:center;
?? ?margin:10px 17px;
?? ?position:relative;
?? ?padding-top:40px;
?? ?color:#9c9c9c;
?? ?font-size:12px;
?? ?text-decoration:none;
?? ?line-height:5px;
?? ?overflow:hidden;}
#move a i{
?? ?position:absolute;
?? ?top:15px;
?? ?left:0;
?? ?display:inline-block;
?? ?width:100%;
?? ?text-align:center;
?? ?fliter:alpha(opacity=100);
?? ?opacity:1;}
#move a:hover{
?? ?color:#900;}
#move img{
?? ?border:none;}
p{
?? ?font-style: normal;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oMove=document.getElementById('move');
var aList=oMove.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=25+'px';
?? ??? ??? ?startMove(_this,{top:15,opacity:100});
?? ??? ??? ?});
?? ??? ?}
?? ?}
}
</script>
</head>

<body>
<div id='move'>
<a href="#"><i><img src="image/barbecue_29.927360774818px_1150132_easyicon.net.png" /></i><p>火鍋</p></a>
<a href="#"><i><img src="image/burger_25.118644067797px_1150135_easyicon.net.png" /></i><p>漢堡</p></a>
<a href="#"><i><img src="image/cheese_28.153846153846px_1150138_easyicon.net.png" /></i><p>蛋糕</p></a>
<a href="#"><i><img src="image/chocolate_39.587628865979px_1150142_easyicon.net.png" /></i><p>面包</p></a>
<a href="#"><i><img src="image/chicken_22.46511627907px_1150141_easyicon.net.png" /></i><p>火腿</p></a>
<a href="#"><i><img src="image/dining_room_24px_1169288_easyicon.net.png" /></i><p>西餐</p></a>
</div>
</body>
</html>

qq_xsg

2017-03-27

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

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

762

操作

收起

5 回答

IT深水坑
2017-10-18

argument.timer = setInterval(function () {
? ?var flag = true; ?//假設(shè)所有運(yùn)動(dòng)都達(dá)到目標(biāo)值
? ?for (var attr in json) {
? ? ? ?var icur = 0;
? ? ? ?if (attr === 'opacity') {
? ? ? ? ? ?icur = Math.round(parseFloat(getStyle(argument, attr)) * 100);
? ? ? ?} else {
? ? ? ? ? ?icur = parseInt(getStyle(argument, attr));
? ? ? ?}

? ? ? ?//算速度
? ? ? ?var speed = (json[attr] - icur)/8;
? ? ? ?speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? ?//檢測(cè)停止
? ? ? ?if (icur !== json[attr]) {
? ? ? ? ? ?flag = false;
? ? ? ?}
? ? ? ?if (attr === 'opacity') {
? ? ? ? ? ?argument.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
? ? ? ? ? ?argument.style.opacity = (icur + speed) / 100;
? ? ? ?} else {
? ? ? ? ? ?argument.style[attr] = icur + speed + "px";
? ? ? ?}
? ?}
? ?if(flag){
? ? ? ?clearInterval(argument.timer);
? ? ? ?if(fn){
? ? ? ? ? ?fn();
? ? ? ?}
? ?}
},30)