js实现放大镜效果

最新推荐文章于 2020-12-09 04:15:02 发布
最新推荐文章于 2020-12-09 04:15:02 发布
阅读量1k 收藏 7
点赞数 2
分类专栏： javascript 文章标签： js css html javascript 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45378970/article/details/108900641
版权

放大镜效果

html

	<div id="big">
		<img src="./imgs/2.jpg" width="100%" alt="">
		<div id="small"></div>
	</div>
	<div id="list">
		<ul>
			<li><img src="./imgs/2.jpg" alt=""></li>
			<li><img src="./imgs/3.jpg" alt=""></li>
			<li><img src="./imgs/4.jpg" alt=""></li>
			<li><img src="./imgs/5.jpg" alt=""></li>
		</ul>
	</div>
	<div id="show">
		<img id="bigPic" src="./imgs/2.jpg" alt="">
	</div>

css

	<style>
		*{
			margin:0px;  
			padding:0px;
		}
		li{
			list-style:none;
		}
		#big{
			width:400px;
			height:400px;
			margin-top:70px;
			margin-left:100px;
			position:relative;
			border:1px solid #ccc;
		}

		#small{
			width:160px;
			height:160px;
			background:yellow;
			opacity:0.4;
			position:absolute;
			top:0px;
			left:0px;
			display:none;
		}
		#show{
			width:400px;
			height:400px;
			position:absolute;
			top:70px;
			left:521px;
			overflow:hidden;
			display:none;
			border:1px solid #ccc;
		}

		#show img{
			position:absolute;
			left:-500px;
		}

		/* 设置图片列表 */
		#list{
			width:400px;
			height:100px;
			margin-top:5px;
			margin-left:100px;
			border:1px solid #ccc;
		}
		#list ul{
			/*width:100%;*/
			/*height:100%;*/
		}
		#list li{
			height:100px;
			float:left;
		}
		#list li img{
			height:100%;
		}
	</style>

js

<script>
		// 获取元素
		var small = document.getElementById('small');	// 小方块
		var big = document.getElementById('big');		// 大方块
		var show = document.getElementById('show');		// 右侧展示的大方块
		var bigPic = document.getElementById('bigPic');	// 大图
		var list = document.getElementById('list');		// 图片列表

		// 获取big元素的left和top值
		var bL = big.offsetLeft;
		var bT = big.offsetTop;

		// 获取big元素的宽度和高度
		var bW = big.offsetWidth;
		var bH = big.offsetHeight;

		// 右侧图片的宽度与高度
		var imgW = 0;
		var imgH = 0;
		// console.log(imgH);

		// 小球的宽度与高度
		var sW = 0;
		var sH = 0;

		// console.log(bL);
		// console.log(bT);

		// 设置鼠标移入事件
		big.onmouseover = function(){
			// 设置small显示
			small.style.display = 'block';
			// 设置show显示
			show.style.display = 'block';

			// 获取small元素的宽度/高度
			sW = small.offsetWidth;
			sH = small.offsetHeight;

			// 获取右侧图片的大小
			imgW = bigPic.offsetWidth;
			imgH = bigPic.offsetHeight;
		}

		// 设置鼠标移出事件
		big.onmouseout = function(){
			// 设置small隐藏
			small.style.display = 'none';
			// 设置show隐藏
			show.style.display = 'none';
		}

		// 设置small的移动
		big.onmousemove = function(e){
			

			// 获取当前鼠标的移动坐标 --- 获取的是鼠标距离当前可视区域顶部的距离
			// var x = e.clientX;
			var y = e.clientY;
			// console.log(y);

			// 获取鼠标距离文档顶部和文档左侧的距离
			var x = e.pageX;
			var y = e.pageY;
			// console.log(y);

			// console.log(x+':'+y);
			// console.log(y);

			// 计算small元素最终的left和top的值
			// left = 鼠标点的x位置 - big的left值 - small的宽度/2
			var l = x - bL - sW/2;

			// top = 鼠标点的y坐标 - big的top的值 - small元素的高度/2
			var t = y - bT - sH/2;

			// 判断small元素的位置
			// 水平方向的临界点 --- big的宽度 - small的宽度
			var maxL = bW - sW -2;	// 右侧临界点 // 2 两个元素的边框
			if(l>=maxL){
				l = maxL;
			}

			// 左侧的临界点
			if(l<=0){
				l = 0;
			}

			// 顶部的临界点
			if(t<=0){
				t = 0;
			}

			// 底部的临界点
			var maxT = bH - sH - 2;	// 2 两个元素的边框
			if(t>=maxT){
				t = maxT;
			}

			// 设置left和top的值
			small.style.left = l+'px';
			small.style.top = t+'px';

			// 右侧的大图的设置 -- 计算大图的偏移值
			// bigL / 1000 = l/400
			var bigL = -imgW/bW*l;
			var bigT = -imgH/bH*t;
			// imgW = bigPic.offsetWidth;
			// imgH = bigPic.offsetHeight;

			// 设置图片的left和top的值
			bigPic.style.left = bigL+'px';
			bigPic.style.top = bigT+'px';
		}

		// 获取图片列表下的所有的li
		var imgList = list.children[0].children;
		// console.log(imgList);

		// 获取图片个数
		var len = imgList.length;
		// 设置所有li的单击事件
		for(var i=0;i<len;i++){
			imgList[i].onclick = function(){
				// 拿到当前图片的地址
				// console.log(this.children[0].src);

				// 赋值给big里面的img元素
				big.children[0].src = this.children[0].src;

				// 赋值给show里面的img
				bigPic.src = this.children[0].src;
			}
		}
	</script>

放大镜完整代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我是放大镜</title>
	<style>
		*{
			margin:0px;  
			padding:0px;
		}
		li{
			list-style:none;
		}
		#big{
			width:400px;
			height:400px;
			margin-top:70px;
			margin-left:100px;
			position:relative;
			border:1px solid #ccc;
		}

		#small{
			width:160px;
			height:160px;
			background:yellow;
			opacity:0.4;
			position:absolute;
			top:0px;
			left:0px;
			display:none;
		}
		#show{
			width:400px;
			height:400px;
			position:absolute;
			top:70px;
			left:521px;
			overflow:hidden;
			display:none;
			border:1px solid #ccc;
		}

		#show img{
			position:absolute;
			left:-500px;
		}

		/* 设置图片列表 */
		#list{
			width:400px;
			height:100px;
			margin-top:5px;
			margin-left:100px;
			border:1px solid #ccc;
		}
		#list ul{
			/*width:100%;*/
			/*height:100%;*/
		}
		#list li{
			height:100px;
			float:left;
		}
		#list li img{
			height:100%;
		}
	</style>
</head>
<body>
	<div id="big">
		<img src="./imgs/2.jpg" width="100%" alt="">
		<div id="small"></div>
	</div>
	<div id="list">
		<ul>
			<li><img src="./imgs/2.jpg" alt=""></li>
			<li><img src="./imgs/3.jpg" alt=""></li>
			<li><img src="./imgs/4.jpg" alt=""></li>
			<li><img src="./imgs/5.jpg" alt=""></li>
		</ul>
	</div>
	<div id="show">
		<img id="bigPic" src="./imgs/2.jpg" alt="">
	</div>

	<script>
		// 获取元素
		var small = document.getElementById('small');	// 小方块
		var big = document.getElementById('big');		// 大方块
		var show = document.getElementById('show');		// 右侧展示的大方块
		var bigPic = document.getElementById('bigPic');	// 大图
		var list = document.getElementById('list');		// 图片列表

		// 获取big元素的left和top值
		var bL = big.offsetLeft;
		var bT = big.offsetTop;

		// 获取big元素的宽度和高度
		var bW = big.offsetWidth;
		var bH = big.offsetHeight;

		// 右侧图片的宽度与高度
		var imgW = 0;
		var imgH = 0;
		// console.log(imgH);

		// 小球的宽度与高度
		var sW = 0;
		var sH = 0;

		// console.log(bL);
		// console.log(bT);

		// 设置鼠标移入事件
		big.onmouseover = function(){
			// 设置small显示
			small.style.display = 'block';
			// 设置show显示
			show.style.display = 'block';

			// 获取small元素的宽度/高度
			sW = small.offsetWidth;
			sH = small.offsetHeight;

			// 获取右侧图片的大小
			imgW = bigPic.offsetWidth;
			imgH = bigPic.offsetHeight;
		}

		// 设置鼠标移出事件
		big.onmouseout = function(){
			// 设置small隐藏
			small.style.display = 'none';
			// 设置show隐藏
			show.style.display = 'none';
		}

		// 设置small的移动
		big.onmousemove = function(e){
			

			// 获取当前鼠标的移动坐标 --- 获取的是鼠标距离当前可视区域顶部的距离
			// var x = e.clientX;
			var y = e.clientY;
			// console.log(y);

			// 获取鼠标距离文档顶部和文档左侧的距离
			var x = e.pageX;
			var y = e.pageY;
			// console.log(y);

			// console.log(x+':'+y);
			// console.log(y);

			// 计算small元素最终的left和top的值
			// left = 鼠标点的x位置 - big的left值 - small的宽度/2
			var l = x - bL - sW/2;

			// top = 鼠标点的y坐标 - big的top的值 - small元素的高度/2
			var t = y - bT - sH/2;

			// 判断small元素的位置
			// 水平方向的临界点 --- big的宽度 - small的宽度
			var maxL = bW - sW -2;	// 右侧临界点 // 2 两个元素的边框
			if(l>=maxL){
				l = maxL;
			}

			// 左侧的临界点
			if(l<=0){
				l = 0;
			}

			// 顶部的临界点
			if(t<=0){
				t = 0;
			}

			// 底部的临界点
			var maxT = bH - sH - 2;	// 2 两个元素的边框
			if(t>=maxT){
				t = maxT;
			}

			// 设置left和top的值
			small.style.left = l+'px';
			small.style.top = t+'px';

			// 右侧的大图的设置 -- 计算大图的偏移值
			// bigL / 1000 = l/400
			var bigL = -imgW/bW*l;
			var bigT = -imgH/bH*t;
			// imgW = bigPic.offsetWidth;
			// imgH = bigPic.offsetHeight;

			// 设置图片的left和top的值
			bigPic.style.left = bigL+'px';
			bigPic.style.top = bigT+'px';
		}

		// 获取图片列表下的所有的li
		var imgList = list.children[0].children;
		// console.log(imgList);

		// 获取图片个数
		var len = imgList.length;
		// 设置所有li的单击事件
		for(var i=0;i<len;i++){
			imgList[i].onclick = function(){
				// 拿到当前图片的地址
				// console.log(this.children[0].src);

				// 赋值给big里面的img元素
				big.children[0].src = this.children[0].src;

				// 赋值给show里面的img
				bigPic.src = this.children[0].src;
			}
		}
	</script>
</body>
</html>
是小王啊i
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
放大镜功能
爱学习的豪豪的博客
08-25 413
完成一个放大镜的功能 当鼠标经过小方块时，旁边会出现一个放大镜，跟随鼠标的移动可以放大各种位置 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
JS实现放大镜效果
10-14
HTML结构是实现放大镜效果的基础。在这个例子中，我们有两个重要的元素：`#small` 和 `#big`。`#small` 是展示原始图片的较小版本，而 `#big` 是用于显示放大部分的较大版本。此外，还有一个 `#mark` 元素，它是一个...
JavaScript实现放大镜效果代码示例
10-15
主要介绍了JavaScript实现放大镜效果代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
放大缩小保证div对齐_如何选择合适的放大镜
weixin_39849054的博客
12-09 51
为什么需要使用放大镜？当我们随着年龄增长实力自然退化，或者因为某些病变引起的视力衰退，无法用眼镜来矫正的时候，这个时候我们需要用到放大镜。当然如果是因为做手工，或者搞研究或者工作需要，也需要用到放大镜。一个放大镜的品质好坏取决于许多光学科技，研发水平和设计制造，在选择一个放大镜的时候，至少要从以下几个方面来考虑：1. 阅读不变形：放大镜的变形性，会影响阅读，尤其是边缘变形，不但影响阅读还缩小阅读面...
放大镜
alone0116的博客
09-09 278
放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。 注：本次使用的图片 基本图片：名称：iphone.jpg  宽：350像素 高：350像素                 放大图片：名称：iphone_big.jpg  宽：800像素 高：800像素                  下面是javascrip
JavaScript实现放大镜效果
09-11
运用 JavaScript以及HTML5实现三种放大镜的效果，包括圆形放大镜效果，直接矩形放大镜效果以及仿淘宝或者京东商品展示放大镜效果。
原生js实现放大镜效果
10-20
本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
用js实现放大镜效果
01-18
本文实例为大家分享了js实现放大镜效果的具体代码，供大家参考，具体内容如下 该放大区域用背景图片放大 <!DOCTYPE html> <html lang=zh> <head> <meta charset=UTF-8> <meta name=...
放大镜的使用
Mr.田的博客
02-05 258
放大镜案例
a63438840的博客
07-25 171
案例分析： 1，整个案例可以分为三个功能模块 2，鼠标经过小图片盒子，黄色的遮挡层 和 大图片盒子显示，鼠标离开，两个盒子隐藏 3，黄色的遮挡层跟随鼠标功能 4，移动黄色遮挡层，大图片跟随移动功能 关键代码： ①布局： 把big 定位在demo 里面，demo 里面放一个 small（和demo一样大) , 图片直接放在 samll 里面而 不是...
promise对象详解
qq_45378970的博客
09-27 4628
promise的含义 1.Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 2.所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 promise对象的特点 1.Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和r
js中in运算符讲解
qq_45378970的博客
10-01 4012
JavaScript中in操作符 定义：in操作符用来判断某个属性属于某个对象，可以是对象的直接属性，也可以是通过prototype继承的属性。 1.对于数组属性需要指定数字形式的索引值来表示数组的属性名称（固有属性除外，如length）。 // Arrays var trees = new Array(“redwood”, “bay”, “cedar”, “oak”, “maple”); 0 in trees // returns true 2.in的右边必须是一个对象，如
js求数组Array最大值方法总结
qq_45378970的博客
09-29 3656
求数组最大值方法总结 方式一: var arr=[1,2,5,70,66,55]; var max=arr[0]; for(var i=0;i<arr.length;i++){ if(max<arr[i]){ max=arr[i]; } } console.log(max); 方式二: var arr1=[10,11,15,66,90]; //apply(obj,[]); 第一个参数为对象 第二个参数为数组 c
js中DOM总结
qq_45378970的博客
09-30 1951
DOM总结DOM概念查找元素文档结构和遍历节点操作DOM高级 DOM概念 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 DOM是“Document Object Model”（文档对象模型）的首字母缩写。 dom节点类型 元素类型 节点类型 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 节点属性 1.nodeName 定义和用法:nodeName
js中对象方法hasOwnProperty()讲解
qq_45378970的博客
10-01 1575
hasOwnProperty() 1.hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。 2.语法：object.hasOwnProperty( propertyName ) 3.hasOwnProperty()函数的返回值为Boolean类型。如果对象object具有名称为propertyName的属性，则返回true，否则返回false。 4.此方法不会检查对象的原型链中是否存在该属性，该属性只有是对象本身的一个成员
jquery 放大镜
最新发布
09-16
jQuery放大镜是一种通过使用jQuery库中的相关功能来实现图片放大镜效果的方法。放大镜效果通常用于网站上的产品展示页面，以提供用户更清晰、细节更丰富的产品展示体验。 要实现jQuery放大镜效果，首先需要引入jQuery库。然后，通过编写jQuery代码来实现以下步骤： 1. 创建一个HTML容器来包含放大镜效果所需的元素，如图片和放大镜窗口。 2. 使用CSS样式来设置容器的尺寸、位置等属性，以及定义放大镜窗口的样式。 3. 使用jQuery选择器来选中需要实现放大镜效果的图片元素，并为其绑定相关的事件。 4. 在鼠标移动事件中，获取鼠标的坐标，并根据放大镜窗口的尺寸和位置，计算出放大镜窗口对应的图片区域。 5. 获取计算出的图片区域，并在放大镜窗口中显示对应区域的放大图。 6. 根据鼠标的位置，调整放大镜窗口的位置，使其跟随鼠标移动。 7. 最后，通过CSS样式，设置放大镜窗口的背景图为放大图，并调整其尺寸，以实现放大效果。 以上是使用jQuery实现放大镜效果的基本步骤。通过细致的调整和样式设置，可以实现更丰富、个性化的放大镜效果，提升用户对产品的展示和体验效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值