跟随鼠标坐标从左到右改变图片的展示

Amazon Translator

已于 2022-10-13 16:25:38 修改

阅读量157

点赞数

分类专栏： Js Jquery HTML 文章标签： javascript 前端 vue.js

于 2022-10-13 16:16:48 首次发布

本文链接：https://blog.csdn.net/qq_45140694/article/details/127303117

版权

Jquery 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

⇣⇣⇣⇣⇣⇣⇣⇣⇣下面是实例代码复制直接可用，样式根据自己喜好去调整修改 ⇣⇣⇣⇣⇣⇣⇣⇣⇣

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.img_wrapper{
		position: absolute;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
</style>
<body>
	
	
	<div>
		<div class="img_wrapper"><img src="https://i-blog.csdnimg.cn/blog_migrate/071bd80e78bc0259ca54bfe9c30cec55.jpeg#pic_center"></div>
		<div class="img_wrapper img_display"><img src="https://i-blog.csdnimg.cn/blog_migrate/9fed9d0a4d9fc20053e0eb69ed1043f5.jpeg#pic_center"></div>
	</div>
	

</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
document.addEventListener('mousemove',function (e) {
        //mousemove 只要鼠标一移动，就会触发事件
        //获取鼠标最新的坐标
        // console.log(e.pageY)
        // console.log(e.pageX);
				
				// 鼠标距离左侧距离
				let setionWidth = e.pageX;
				
				// 获取浏览器当前窗口可视区域宽度
				let scwidth = $(window).width();
				$(".img_display").width((setionWidth/scwidth)*100 +"%");
				 // console.log((setionWidth/scwidth)*100);
    })

	</script>
</html>