<!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>
添加回答
举报
0/150
提交
取消