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

最新推荐文章于 2021-08-04 21:48:05 发布

Agwenbi

最新推荐文章于 2021-08-04 21:48:05 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： js鼠标经过图片图片的渐隐渐现

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/52808966

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

<!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>

Agwenbi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
js鼠标经过，实现图片的渐隐渐现

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{padding: 0;margin: 0;} body{b
复制链接

扫一扫