我的鼠标移入后图标会消失没问题，但移出后图标不回来，不清楚什么原因，求大神解答。。。
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.鼠标移入之后的混乱现象
向死而生34915002回答
随时随地看视频慕课网APP
相关分类
JavaScript