js放大镜

最新推荐文章于 2023-03-19 16:40:41 发布
最新推荐文章于 2023-03-19 16:40:41 发布
阅读量96 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2QWSDN/article/details/89525784
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>放大镜</title>
</head>
<style type="text/css">
	*{
		margin:0;
		padding: 0;
		list-style: none;
	}
	.middle{
		width: 1300px;
		margin:100px auto;
	}
	.left{
		width: 580px;
		height: 340px;
		border:1px solid #ccc;
		position: relative;
		float: left;
	}
	.left img{
		width: 600px;
		height: 400px;

	}
	 .left .small{
		width: 200px;
		height: 200px;
		border:1px solid #ccc;
		position: absolute;
		top:0;
		left: 0;
		background: pink;
		opacity: 0.3;
		display:none;
		
	}
	.right{
		width: 700px;
		height: 600px;
		border:1px solid #ccc;
		position: relative;
		float: right;
		overflow: hidden;
	}
	.right img{
		position: absolute;
		width: 800px;

		
		
	}
</style>
<body>
	<div class="middle">
		<div class="left" id="zb">
			<img src="22.jpg" alt="" />
			<div class="small" id="xh"></div>
		</div>
		<div class="right"  id="yb">
			<img src="22.jpg" alt=""  / id="yt">
		</div>
	</div>
</body>
<script type="text/javascript">
	zb.onmouseover=function(){
		xh.style.display="block"
                 //当鼠标移到盒子上面。小盒子block
		yb.style.display="block"
	}         //右边的大盒子block
	zb.onmouseout=function(){
		xh.style.display="none";
                  //当鼠标移到盒子外面。小盒子为none
		yb.style.display="none"
                //当鼠标移到盒子外面。大盒子为none

	}
	xh.onmousemove=function(e){
        var e=e||event;

        var x=e.clientX-zb.offsetLeft-xh.offsetWidth/2;
           //鼠标的位置等于鼠标的最大宽-大盒子左边距离-小盒子的宽/2
        var y=e.clientY-zb.offsetTop-xh.offsetHeight/2;
            //鼠标的位置等于鼠标的最大高-大盒子上边距离-小盒子的高/2

        if(x<0){
        	x=0
        }if(y<0){
        	y=0
        }if(x>zb.offsetWidth-xh.offsetWidth){
               //大盒子的最大宽-小盒子的可见宽就是xh能移动的最大位置
        	x=zb.offsetWidth-xh.offsetWidth
        }if(y>zb.offsetHeight-xh.offsetHeight){
        	y=zb.offsetHeight-xh.offsetHeight
               //大盒子的高度-小盒子的高度就是xh能移动的最大位置
        }
        xh.style.left=x+"px";
        xh.style.top=y+"px";
           
         yt.style.left=-x*1+"px";
         yt.style.top=-y*1+"px";
	}
</script>
</html>

 

吴恒利
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS图片放大镜
03-14
原生javascript图片放大镜，苏宁商城图片放大镜效果，放大
js实现放大镜
weixin_52412707的博客
04-20 398
完整版的html,css,js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
js实现放大镜效果
adminsir0的博客
08-17 522
js，放大镜，效果，放大效果，js特效，案例
js版放大镜
花花的博客
06-03 671
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;放大镜&lt;/title&gt; &lt;style&gt; *{ padding: 0;
js放大镜放大图片效果
10-30
JS 放大镜图片效果的 JavaScript 实现主要负责处理图片的放大和缩小操作。这里使用了 JavaScript 的事件监听机制来监听用户的鼠标事件，并使用绝对定位来设置图片展示区域和放大镜区域的位置。 ```javascript ...
原生JS放大镜
10-04
最后，提供的文件名"texiao1958_1560680836"可能是一个时间戳或者某种特定的命名规则，但在这个上下文中，它与原生JS放大镜功能的实现无关，所以未在本文中涉及。如果有具体对应的资源或代码，需要结合实际情况进行...
JavaScript实现放大镜效果代码示例
10-15
JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
javascript放大镜效果
10-30
当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大...
js放大镜（适用于商品详情）
10-22
总的来说，实现一个商品详情页的JS放大镜功能，需要理解JavaScript事件处理、CSS布局和图片处理等基础知识。通过结合HTML、CSS和JavaScript，我们可以创建出一款能够提升用户体验的交互式放大镜功能。
js实现简单放大镜效果
11-20
用js实现简单放大镜效果，供大家参考，具体内容如下 此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩，图片的一个区域就会被放大，然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大，而是等比例移动。下面是实现的代码： css样式代码如下： <style> .s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;} .s_box img{width: 400px;height: 300px;} .s_box span{width: 130px;height: 10
放大镜js
zichuanhuo221的博客
12-28 407
/**  * Created by mouwe on 2016/12/22.  */ // 获取DOM元素 var _smallImage = document.getElementById("smallImage"); var _simage = _smallImage.children[0]; var _bigImage = document.getElementById("big
JS--放大镜
F-Prometheus的博客
01-10 263
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
JS实现放大镜
m0_71144319的博客
03-19 240
js实现放大镜效 首先放大镜的原理，通过调整移动距离比例，由左方小图片中移动小方框，显示右边提前设置好的窗口中放大的局部图片
JS 放大镜功能
weixin_44264878的博客
05-27 430
用JS实现放大镜效果 效果图 布局 <div class="box" id="box"> <div class="small"><!--小层--> <img src="images/small.png" width="350" alt=""/> <div class="mask"></div&...
用js写放大镜
ASLlife的博客
04-25 374
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { margin: 0; pad...
js 实现放大镜功能
hangnan315的博客
08-09 156
js 实现放大镜功能 思路： 需要两个盒子（big+small），和一个遮罩(mark)，两张图片（’.big img’+’.small img’） 随着鼠标的移动，遮罩跟着移动 运用知识： 根据遮罩的移动，计算大图与小图的比例 ，随之改变大图的top和left值移动到对应的位置上 const posi = -(′.bigimg′).width()/('.big img').width()/(′.bigimg′).width()/(’.small img’).width() 效果图： 上
js实现放大镜功能
qq_46568518的博客
03-21 353
如下是效果视频： Document - Google Chrome 2022-03-21 22-50-26 首先我们制作两个容器用于存放原图和放大后的图片 <div class="shop"> <div class="slider"></div> </div> <div class="mirro
JS实现放大镜功能
zxh996的博客
07-06 953
JavaScript精选案例 这个系列是在阿海前端学习中遇到的一些经典案例，具有很大的学习意义！ JS实现放大镜功能JavaScript精选案例前言一、放大镜案例方法一方法二总结 前言 js制作放大镜是非常经典的案例，在很多地方也非常常见，例如商品的查看，我也整理了一些自己以前使用过的方法，仅供参考学习。 一、放大镜案例 方法一 第一种方法较为常见，也更容易理解 代码如下（示例）： <style> .box { position: rela
js放大镜document.querySelector
最新发布
11-17
以下是一个使用`document.querySelector`实现的js放大镜的例子： ```html <!DOCTYPE html> <title>JS放大镜 #small { width: 400px; height: 400px; position: relative; background-image: url...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值