Html+Css+Js实现放大镜功能（完整代码+详解）

最新推荐文章于 2023-08-10 11:14:43 发布
最新推荐文章于 2023-08-10 11:14:43 发布
阅读量1.6w 收藏 83
点赞数 30
分类专栏： 读卷有益 Html JavaScript Css 案例详解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38170526/article/details/98109424
版权

一，问题描诉

通过将鼠标指向指定的图片，将鼠标移动到图片时，显示一个透明的小区域，然后将小区域的部分放大，查看细节。放大过程中必须满足几个条件：
在这里插入图片描述

1.鼠标移动时，透明的小区域也跟着移动，并且透明的小区域必须在指定的图片内，不得出该图片的范围。
2.放大的区域要按照一定的比例展示出来

二，难点分析

2.1难点列出
1.鼠标在图片区域时，透明小区域出现，放大的区域出现
2.鼠标移出图片时，透明小区域小时，放大区域消失
3.透明小区域随着鼠标移动
2.2 难点解决关键（对应解决回答）
1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block
2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none
3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemove监听，不停的将透明小区域的top和left置为event.layerX,event.layer.Y的值

三，详细代码

3.1 代码结构

在这里插入图片描述

3.2 具体代码
html代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/Magnifier.css"/>
	<script src="../js/Magnifier.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="all">
			<div id="small">
				<img src="../images/small.jpg"/>
				<div id="shadow"></div>
				<div id="cover"></div>	
			</div>
			<div id="big">
				<img src="../images/big.jpg"/>
			</div>
			
		</div>
	</body>
</html>
Css代码
*{
	padding: 0px;
	margin: 0px;
}
#all{
	margin: 0 auto;
	width: 1000px;
	height: 800px;
	border:1px solid blue ;
}
#small{
	width: 310px;
	height: 310px;
	margin-top: 80px;
	margin-left:100px;
	border:1px solid red ;
	position: relative;
	float: left;
}
#small img{
	/*border:1px solid gray ;*/
}
#shadow{
	width: 100px;
	height: 100px;
	background-color: black;
	opacity: .2;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	cursor: move;
}
#cover{
	width: 100%;
	height:100%;
	z-index: 10;
	position: absolute;
	left: 0px;
	top: 0px;
	cursor: move;
}
#big{
	width: 310px;
	height: 310px;
	position: relative;
	overflow: hidden;
	border:1px solid yellow ;
	display: none;
	
}
#big img{
	position: absolute;
	top: 0px;
	left: 0px;
}
Js代码
window.onload=function(){
	small=document.getElementById("small");
	shadow=document.getElementById("shadow");
	shadowWH=shadow.style.width?shadow.style.width:document.defaultView.getComputedStyle(shadow,null).width;
	shadowWH=parseInt(shadowWH);
	smallW=small.style.width?small.style.width:document.defaultView.getComputedStyle(small,null).width;
	smallW=parseInt(smallW);
//	smallML=small.style.marginLeft?small.style.marginLeft:document.defaultView.getComputedStyle(small,null).marginLeft;
//	smallML=parseInt(smallML);
	
	smallMT=small.style.marginTop?small.style.marginTop:document.defaultView.getComputedStyle(small,null).marginTop;
	smallMT=parseInt(smallMT);
	big=document.getElementById("big");
	bigW=big.style.width?big.style.width:document.defaultView.getComputedStyle(big,null).width;
	bigW=parseInt(bigW);
//	console.log(smallW);
//	console.log(shadowWH)
//console.log("smallML="+smallML);
//console.log("smallMT="+smallMT);
//console.log("bigw="+bigW);
	bigImg=big.getElementsByTagName("img")[0];
	move();
}
function move(){
	small.onmouseover=function(){
		shadow.style.display="block";
		big.style.display="block";
		change(event);
	}
	small.onmouseout=function(){
		shadow.style.display="none";
		big.style.display="none";
	}
	small.onmousemove=function(){
		change(event);
	}
}
function change(event){
	var evt=event?event:window.event;
//	var moveL=evt.pageX;
//	var moveT=evt.pageY;
	var moveL=evt.layerX-shadowWH/2;
	var moveT=evt.layerY-shadowWH/2;
	
//	console.log("moveL="+moveL+":  moveT="+moveT);
	
	if(moveL<0){
		moveL=0;
	}
	if(moveL>smallW-shadowWH){
		moveL=smallW-shadowWH;
	}
	
	if(moveT<0){
		moveT=0;
	}
	if(moveT>smallW-shadowWH){
		moveT=smallW-shadowWH;
	}
	
	shadow.style.left=moveL+"px";
	shadow.style.top=moveT+"px";
	/**
	 * 图片放大
	 */
//	big.style.left=smallW+smallML+50+"px";
	big.style.left=50+"px";
	big.style.top=smallMT+"px";
	bigImgW=bigImg.offsetWidth;
//	console.log("bigImgW="+bigImgW);
	var scale=bigImgW/bigW;
	bigImg.style.top=-moveT*scale+"px";
	bigImg.style.left=-moveL*scale+"px";
}

四，效果演示

在这里插入图片描述

lucksoul
关注
  • 30
    点赞
  • 踩
  • 83
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
放大镜.html
06-11
一个简单的放大镜的demo，功能实现，代码较少。注意图片路径，有问题可以联系。
原生JS实现电商网站图片放大镜特效
捕鱼麦大叔的博客
05-06 1626
放大镜特效是电商网站常用效果，指鼠标滑过图片时会出现图片的局部放大图，使用JS就可实现，下面是最终效果图：放大镜原理：鼠标在小图片上移动时，通过捕获鼠标在小图标上的位置，定位大图标相应的位置主要功能：鼠标移入，放大镜显示鼠标移出，放大镜隐藏鼠标移动，放大镜随之移动，并且当大制定部分涉及三个鼠标事件：onmouseover ： 鼠标指针移动到指定对象时触发onmouseout： 鼠标指针移出指定对象...
html + css + js 实现购物商品放大镜效果
11-23
这里记录了：html + css + js 实现购物商品放大镜效果
HTML+css+JavaScript实现放大镜效果
09-07
HTML+css+JavaScript实现放大镜效果
jQuery html 放大镜效果
08-24
内涵2个放大镜效果。可自行查看html效果。
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
Hi_MrXiao的博客
08-31 1989
鼠标移动到需要放大的网页上时，鼠标静止不动500毫秒后，一个长方形的放大镜框显示，放大镜中显示当前区域2.2倍的效果，并且这时候鼠标移动放大的区域也跟着变化。放大镜限制：放大镜只能在特定的区域内使用，即放大镜的移动范围有边界。
HTML放大镜 （商品放大镜）
花醉三千客
11-05 828
HTML放大镜 （商品放大镜）
js实现放大镜效果
adminsir0的博客
08-17 491
js，放大镜，效果，放大效果，js特效，案例
[HTML/JS]用HTML、JS实现放大图片效果（放大镜）
GS119115的博客
01-12 2273
购物软件普遍自带的商品放大镜可以让卖家浏览商品细节，想要自己实现如下。
html实现商品图片放大镜，html图片放大镜预览
weixin_43992507的博客
08-10 1049
html实现商品图片放大镜，html图片放大镜预览
基于HTML5+CSS3+JavaScript实现放大镜功能.zip
最新发布
02-13
html5开发
css常用代码大全(html+css代码).pdf
07-13
css常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdf
HTML+CSS+JS的爱心代码.zip
06-19
HTML+CSS+JS的爱心代码.zip HTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱
可放大任何HTML元素的网页放大镜
04-11
可放大任何HTML元素的网页放大镜，定倍、变倍、旁置放大窗口功能
图书馆座位管理系统设计与实现（前后端分离vue+springboot）
热门推荐
qq_38170526的博客
04-15 1万+
图书馆座位管理系统 项目简介 本系统是针对图书馆传统管理的不足和座位资源分配不合理，利用效率低下的现象，提出的一整套改善方案。目标是提高图书馆座位资源的利用效率，降低图书馆管理座位资源的难度，方便人们的使用，将资源的利用分配，现代化科技，服务为民的宗旨强有力的结合在一起，打造一整套的信用制度，让资源利用合理化和公共设施便民化深入人心，让行为成为一种习惯。本系统采用前后分离的概念，将前端和后端分离...
Html+Css+Js五星好评（完整代码+详解）
qq_38170526的博客
08-02 9317
一，问题描述 当鼠标滑过空白的五颗星星时，有预览的颜色填充，当点击鼠标后，颜色填充确定，确定的颜色是绿色，当鼠标预览时，依然有预览色，没有点击鼠标确定时，颜色依然是，上一次的记录，点击了则是当次的好评记录，并且点击后，会有提示框弹出提示。 二，效果预览 三，用到的主要事件 onclick：点击事件 window.onload：页面加载事件 四，遇到的问题 鼠标从左往右可以看到与...
java闯关小游戏+详解+完整源代码+测试结果
qq_38170526的博客
06-25 5153
小游戏面向对象 一，问题分析 计算机输出字符串，玩家根据计算输出的内容重复输入，如果输入正确，进入一下关的练习 该过程记录玩家的积分，定义游戏的关卡，定义游戏的规则 1.1定义游戏的规则 游戏的关卡 1关 每关字符串的长度 如果是2个长度 每关字符串出现的次数 5次 ab cd ef de er 每关时间限制 ...
Html+Css+Js瀑布流式的不断加载数据（完整代码+详解）
qq_38170526的博客
08-02 2461
一，问题描述 页面的数据浏览完后是需要加载的，当浏览到页面底部时，没有了内容，滚动滚动条就会自动加载后面的数据。 二，效果预览 三，用到的主要事件 window.onload：页面加载事件 window.onscroll：滚动条滚动事件 四，完整代码 代码结构 Html代码 <!DOCTYPE html> <html> <head> ...
HTML+css+JavaScript实现购物车功能代码
05-17
HTML: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>购物车</h1> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody id="cart-list"> <tr> <td>商品1</td> <td>100</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>100</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> <tr> <td>商品2</td> <td>200</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>200</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> <tr> <td>商品3</td> <td>300</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>300</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> </tbody> <tfoot> <tr> <th colspan="3">合计：</th> <th id="total-price">600</th> <th><button onclick="clearCart()">清空购物车</button></th> </tr> </tfoot> </table> </body> <script src="script.js"></script> </html> ``` CSS: ```css table { border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #eee; } button { background-color: #f00; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } input[type="number"] { width: 50px; text-align: center; } ``` JavaScript: ```javascript // 获取购物车商品列表 let cartList = document.getElementById('cart-list').rows; // 计算总价 function calcTotalPrice() { let totalPrice = 0; for (let i = 1; i < cartList.length - 1; i++) { let quantity = cartList[i].cells[2].children[0].value; let price = cartList[i].cells[1].innerHTML; let subtotal = quantity * price; cartList[i].cells[3].innerHTML = subtotal; totalPrice += subtotal; } document.getElementById('total-price').innerHTML = totalPrice; } // 改变商品数量 function changeQuantity(input) { if (input.value < 1) { input.value = 1; } calcTotalPrice(); } // 删除商品 function removeItem(button) { let row = button.parentNode.parentNode; row.parentNode.removeChild(row); calcTotalPrice(); } // 清空购物车 function clearCart() { for (let i = 1; i < cartList.length - 1; i++) { cartList[i].parentNode.removeChild(cartList[i]); } document.getElementById('total-price').innerHTML = 0; } ``` 这段代码实现了一个简单的购物车功能，可以添加商品、删除商品、修改数量，并且会实时计算总价。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值