仿淘宝实现鼠标移入移出商品透明

最新推荐文章于 2023-10-13 20:21:46 发布

lswoqsked

最新推荐文章于 2023-10-13 20:21:46 发布

阅读量287

点赞数 1

分类专栏： js 文章标签： js动画

本文链接：https://blog.csdn.net/lswoqsked/article/details/90713566

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.shop{
	width: 200px;
	height:200px;
	position: absolute;
	left: 200px;
	top: 200px;
	position: relative;
background-color: red;
filter:alpha(opacity:100);
opacity:1;
}
.shop img{
	width: 100%;
	height:100%;
	
}
</style>
<script>
	window.onload=function(){
		var odiv=document.getElementById('small');
		odiv.onmouseover=function(){
			startmove(30);
		}
		odiv.onmouseout=function(){
			startmove(100);
		}
	}
	var timer=null;
	var alpha =100;
	function startmove(itarget){
		var odiv=document.getElementById('small');
		clearInterval(timer);
		timer=setInterval(function(){
			var speed=0;
			if(alpha>itarget)
			{
				speed=-10;
			}
			else{
				speed=10;
			}
		if(alpha== itarget){
		clearInterval(timer);
		}
		else{
		alpha+=speed;
		odiv.style.filter='alpha(opacity:'+alpha+')';//IE浏览器
		odiv.style.opacity=alpha/100;//火狐和chrome浏览器
		
		}	
		},30)
			
	}	
</script>
</head>
<body >
<div  class="shop" id="small"><img src="img/3.jpg"></img></div>
</body>
</html>

效果:

在这里插入图片描述
原图

在这里插入图片描述
鼠标移入

鼠标移出

lswoqsked

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿淘宝实现鼠标移入移出商品透明

代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.shop{ width: 200px; height:200px; position: absolute; left: 200px; to...
复制链接

扫一扫