一动不动为什么

来源:7-1 JS动画案例

慕仙4324424

2016-10-26 22:45

<!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>无标题文档</title>

<script src="任意属性值.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:-45,opacity:0},function(){

_this.style.top=10+'px';

startMove(_this,{top:0,opacity:100});

});

}

}

}


</script>

<style>

*{margin:0;

padding:0;}

#move{

width:300px;

height:180px;

margin:10px auto;

border:1px solid #ccc;}

#move 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-top:40px;

color:#9c9c9c;

font-size:12px;

text-decoration:none;

line-height:25px;

overflow:hidden;

}

#move a i{

position:absolute;

    top:0px;

left:0px;

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="image/ebook.png"></i><p>电子书</p></a>

<a href="#"><i><img src="image/ebook.png"></i><p>电子书</p></a>

<a href="#"><i><img src="image/food.png"></i><p>美食</p></a>

<a href="#"><i><img src="image/licai.png"></i><p>理财</p></a>

<a href="#"><i><img src="image/life.png"></i><p>生活</p></a>

<a href="#"><i><img src="image/move.png"></i><p>电影</p></a>

</div>

</body>

</html>


写回答 关注

2回答

  • Dicrector
    2016-11-08 10:01:07

    http://img.mukewang.com/582131710001c1ed05940099.jpg

    var 是定义一个变量 类似于Java的 int  a=1,b=8;一样

    怎么可以写成 var_this呢?

  • 慕移动6033542
    2016-10-27 12:42:52

    var_this  改为  var _this

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113920 学习 · 1502 问题

查看课程

相似问题