javascript案例---简单的视觉效应

最新推荐文章于 2019-07-27 15:50:00 发布

qq_39985511

最新推荐文章于 2019-07-27 15:50:00 发布

阅读量576

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_39985511/article/details/78064061

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一个利用HTML与JavaScript实现的鼠标互动视觉效果案例。通过两张图片的叠加，并根据鼠标的位置改变图片位置，创造出动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，现在给大家展示一个视觉效应的案例；

思路：一张背景图，一张图片，产生重叠，通过鼠标的移动，让2张图片的跟随移动

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			ul,ol,li{list-style:none;}
			.vision{width:750px;height:200px;position:relative;overflow:hidden;left: 100px;}
			.vision li{width:850px;height:200px;position:absolute;top:0;left:-50px;}
			.zz{width:750px;height:200px;position:absolute;top:0;left:0;border: 1px solid red;}
		</style>
	</head>
	<body>
		<ul class="vision">
			<li><img src="1.png" alt="" /></li>
			<li><img src="2.png" alt="" /></li>
			<div class="zz"></div>
		</ul>
		<script>
			var odiv = document.getElementsByClassName("vision")[0];
			var oli = odiv.getElementsByTagName("li");
			var ozz = odiv.getElementsByClassName("zz")[0];
			ozz.onmouseover = function(){
				ozz.onmousemove = function(evt){
					evt = evt || window.event;
					var a = 50 * evt.offsetX / ozz.offsetWidth;
					var b = 2 * a;
					oli[0].style.left = a - 75 + "px";
					oli[1].style.left = b - 100 + "px";
				}
				ozz.onmouseout = function(){
					ozz.onmousemove = null;
				}
			}
		</script>
	</body>
</html>

效果如下：