1.Html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画案例</title> <style> *{ margin: 0; padding: 0; text-decoration: none; } #div1{ width: 288px; height: 200px; border: 1px solid #eaeaea; margin: 10px auto; } #div1 a{ display: inline-block; border-radius: 3px; float: left; width: 70px; height: 65px; border: 1px solid #eaeaea; position: relative; overflow: hidden; } #div1 a i { position: absolute; top: 0px; left: 0px; display: inline-block; width: 100%; text-align: center; fliter: alpha(opacity: 100); opacity: 1; } #div1 a p{ width: 70px; height: 18px; font-size: 12px;color: #3C3C3C; text-align: center; position: absolute; top: 45px; left: 0; } #div1 a:hover p{ color: red; } span{ display: inline-block; margin-top: 11px; width: 24px; height: 24px; background-image: url(../img/便名服务1.png); background-repeat: no-repeat; position: absolute; top:0; left: 20px; } .icon1{ background-position: 0 0; } .icon2{ background-position: 0 -44px; } .icon3{ background-position: 0 -85px; } .icon4{ background-position: 0 -132px; } .icon5{ background-position: 0 -176px; } .icon6{ background-position: 0 -220px; } .icon7{ background-position: 0 -264px; } .icon8{ background-position: 0 -308px; } .icon9{ background-position: 0 -352px; } .icon10{ background-position: 0 -396px; } .icon11{ background-position: 0 -440px; } .icon12{ background-position: 0 -484px; } </style> <script src="同时运动动画.js"></script> <script> window.onload = function(){ var oDiv =document.getElementById("div1"); var oSpan = document.getElementsByTagName("a"); for(var i=0;i<oSpan.length;i++){ oSpan[i].onmouseover=function(){ var _this = this.getElementsByTagName("i")[0]; startMove(_this,{top:-45,opacity:0},function(){ _this.style.top = 12+"px"; startMove(_this,{top:0,opacity:100}); }) } } } </script> </head> <body> <div id="div1"> <a href="#"><i><span class="icon1"></span></i><p>充话费</p></i></a> <a href="#"><i><span class="icon2"></span></i><p>游戏</p></i></a> <a href="#"><i><span class="icon3"></span></i><p>旅行</p></i></a> <a href="#"><i><span class="icon4"></span></i><p>保险</p></i></a> <a href="#"><i><span class="icon5"></span></i><p>彩票</p></i></a> <a href="#"><i><span class="icon6"></span></i><p>电影</p></i></a> <a href="#"><i><span class="icon7"></span></i><p>点外卖</p></i></a> <a href="#"><i><span class="icon8"></span></i><p>理财</p></i></a> <a href="#"><i><span class="icon9"></span></i><p>找服务</p></i></a> <a href="#"><i><span class="icon10"></span></i><p>音乐</p></i></a> <a href="#"><i><span class="icon11"></span></i><p>水电煤</p></i></a> <a href="#"><i><span class="icon12"></span></i><p>火车票</p></i></a> </div> </body></html>2.Js代码function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } // startMove(obj,{style1:value1,style2:value2},fn) function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer = setInterval(function(){ for(var style1 in json) { //1.取当前值 var icur = 0; if(style1 == "opacity"){ icur = Math.round(parseFloat(getStyle(obj,style1))*100); }else{ icur =Math.round(parseInt(getStyle(obj,style1))); } //2.算速度 var speed =(json[style1]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur != json[style1]){ flag = false; } if(style1 =="opacity"){ obj.style.filter ="alpha(opacity:"+(icur+speed)+")"; obj.style.opacity = (icur+speed)/100; }else{ obj.style[style1] = icur+speed+"px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30) } 3.icon图片4.码好之后的布局5.鼠标移入之后的混乱现象
添加回答
举报
0/150
提交
取消