<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JS动画案例</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
i{list-style: none;filter:alpha(opacity=100);opacity=1;top:20px;}
a{text-decoration: none;display:block;float:left;margin:20px 10px;}
#move{width:300px;height:250px;margin:30px;border:2px solid #ccc;}
</style>
<script type="yundong.js"></script>
<script type="text/javascript">
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:20,opacity:100});
});
}
}
}
</script>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="move">
<a href="#" title=""><i><img src="images/jsq1.jpg" alt=""></i><p>计算器1</p></a>
<a href="#" title=""><i><img src="images/jsq2.jpg" alt=""></i><p>计算器2</p></a>
<a href="#" title=""><i><img src="images/jsq3.jpg" alt=""></i><p>计算器3</p></a>
<a href="#" title=""><i><img src="images/jsq1.jpg" alt=""></i><p>计算器4</p></a>
<a href="#" title=""><i><img src="images/jsq2.jpg" alt=""></i><p>计算器5</p></a>
<a href="#" title=""><i><img src="images/jsq3.jpg" alt=""></i><p>计算器6</p></a>
</div>
</body>
</html>
eko4107343
相关分类