您的位置：首页 > Web前端 > JavaScript

js鼠标经过，实现图片的渐隐渐现

2016-10-13 18:12 351 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{background-color: #d8d8d8;}
#box{width:400px;height:320px;opacity: 0;border: 1px solid black;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
oBox.onmouseover=function(){//鼠标经过调用move函数
move(oBox,100,'opacity');
};
oBox.onmouseout=function(){
move(oBox,0,'opacity');
};
oBox.time=null;//添加一个oBox的专属time。
function move(obj,target,name){//三个参数代表对象，目标值，属性名
clearInterval(obj.time);
function dong(){
var cur=0;
if(name=='opacity'){//如果获取的是对象的透明度，进行特别处理
cur=parseFloat(getstyle(obj,name))*100;//获取的透明度是一个小数，在电脑上会做四舍五入，所以要完全获得透明度，用parseFloat保留小数，乘以100意思是，在IE下，透明度是一个几十的数（如50）
}
else{
cur=getstyle(obj,name);//如果不是透明度，做其他处理。
}
var speed=(target-cur)/20;//目标值减去获取的属性名对应的值，除以运动系数，得到速度（非匀速）
speed>0?Math.ceil(speed):Math.floor(speed);//判断速度是否大于0，进行上下取整处理。
if(cur==target){//当获取的属性名对应的属性值等于目标值的时候，停止定时器
clearInterval(obj.time);
}
else{//否则继续运行定时器
if(name=='opacity'){//如果属性名是透明度，进行以下处理
cur=cur+speed;//定时器每运行一次，cur就等于上一次的cur的值加上速度，知道cur等于目标值。
obj.style.opacity=cur/100;//在非IE下执行这行代码。
obj.style.filter='alpha(opacity:'+cur+')';//在IE下执行这行代码。
}
else{//如果不是透明度
cur=cur+speed;<span style="font-family: Arial, Helvetica, sans-serif;">//定时器每运行一次，cur就等于上一次的cur的值加上速度，知道cur等于目标值。</span>

obj.style[name]=cur+'px';//能改具有px属性的功能
}
}
}
obj.time=setInterval(dong,30);//对象专属的定时器
}

};
function getstyle(obj,name){//获得非行间样式的属性值obj表示对象，name表示对象的属性，举个例子obj.name=oBox.width
if(obj.currentStyle){//兼容性处理，在IE浏览器下起作用
return obj.currentStyle[name];//这里不能写成obj.currentStyle.name，引文name不是一个属性，是一个参数，所以要用[name]
}
else{
return getComputedStyle(obj,false)[name];//在非IE下起作用
}
}
</script>
</head>
<body>
<div id='box'>
<img src="../img/3.jpg" />
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js鼠标经过图片图片的渐隐渐现

相关文章推荐

新的分享

章节导航