前端——js 天猫商品图放大镜效果、鼠标移动显示放大效果、（查看图片细节）_前端鼠标聚焦放大元素_不要生病~的博客-程序员秘密

1.页面布局

定位一个正常的图片，上面放一个可被鼠标移动的半透明的色块，
在图片右侧隐藏一个更大的图片，
当半透明色块移动时显示右侧大图的对应部分

注：如果想在网页中查看源代码提取文件，提取不到大图，可以直接Ctrl+s保存网页全部内容

       <div id="left">
	    	<div id="box"></div>
	    </div>
	    
	    <div id="right">
	    	<img id="bbox" src="../HTML/img/big.jpg"></img>
	    </div>

2.页面样式

为了让色块可以在图片中移动，需要给图片相对定位，色块绝对定位，便于给色块进行位置赋值
为了让大图根据色块进行位置变化，需要给右边外框相对定位，图片绝对定位
分别给左右框左浮动，保障放大图出现在正常图旁边

*{
				padding:0;
				margin: 0;
			}
			#left{
				width: 400px;
				height: 400px;
				border: 1px solid black;
				margin:20px;
				background-image: url(../HTML/img/small.jpg);
				background-size: 100% 100%;
				position: relative;
				float: left;
			}
			#box{
				width: 220px;
				height: 200px;
				background:white;
				/*透明度*/
				opacity: 0.4;
				/*方块要动所以给他一个定位*/
				position: absolute;
			}
			#right{
				width: 440px;
				height: 400px;
				border: 1px solid black;
				position: relative;
				float: left;
				margin:20px;
				overflow: hidden;
			}
			#bbox{
				position: absolute;
				left: 0;
				top: 0;
			}

3.给左侧图片加鼠标移动事件

1）鼠标移动函数

left.onmousemove=function(e){      }

2）获得兼容的事件对象（鼠标位置）
window.event：ie解析这个 e:谷歌，火狐解析这个

var move=window.event||e;

3）获得鼠标距离事件源的位置（需要先给事件源一个相对定位)
move.offsetX:IE浏览器上的获取方法,e.offsetX:非IE浏览器的获取方法

var move_left=move.offsetX||e.offsetX;
var move_top=move.offsetY||e.offsetY;

4）为了让鼠标在色块中心时色块开始正式移动,所以鼠标位置减去色块的一边才是色块距离边框的真实距离
在这里插入图片描述

var box_left=move_left-110;
var box_top=move_top-100;

5）将计算好的位置赋值给色块

box.style.left=box_left+"px";
box.style.top=box_top+"px";

4.色块在触碰过程中会抖动的原因

鼠标和事件源之间如果有其他元素存在,效果的触发就会有问题（图片作为事件源，色块影响了效果）
所以要避免鼠标与事件源有其他元素,可以在色块和图片上在加一个盒子,让鼠标在盒子上移动

<div id="new"></div>

调整盒子的位置，保证盒子透明

#new{
				width: 400px;
				height: 400px;
				background: blue;
				position: absolute;
				top: 0;
				left: 0;
				/*背景设置成透明*/
				opacity: 0;
				/*鼠标变成十字*/
				cursor: crosshair;
			}

5.保证色块不超出表框

所以当计算好色块的距离小于0时,不再让色块在移动而是等于0
判断结束后再进行赋值

if(box_left<0){
              	box_left=0;
              }
              if(box_top<0){
              	box_top=0;
              }
              if(box_left>180){
              	box_left=180;
              }
              if(box_top>200){
              	box_top=200;
              }

6.控制右侧显示大图

右侧整个大图片800x800
1）根据对应色块移动，大图在框内的显示位置可得到关系式

var bbox_left=box_left*-2;
var bbox_top=box_top*-2;

2）将计算的值赋值

bbox.style.left=bbox_left+"px";
bbox.style.top=bbox_top+"px";

7.当鼠标移入移出色块

1）鼠标未移入前色块，右侧大图不显示

#box,#right{
				display: none; 			}

2）鼠标移入事件，色块显示 ,右侧大图显示

newleft.onmouseover=function(){
            	box.style.display="block";
            	right.style.display="block";
            }

3）鼠标移出事件色块显示 ,右侧大图消失

newleft.onmouseout=function(){
            	box.style.display="none";
            	right.style.display="none";
            }

8.源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		
			*{
				padding:0;
				margin: 0;
			}
			#left{
				width: 400px;
				height: 400px;
				border: 1px solid black;
				margin:20px;
				background-image: url(../HTML/img/small.jpg);
				background-size: 100% 100%;
				position: relative;
				float: left;
			}
			#box{
				width: 220px;
				height: 200px;
				background:white;
				/*透明度*/
				opacity: 0.4;
				/*方块要动所以给他一个定位*/
				position: absolute;
			}
			#right{
				width: 440px;
				height: 400px;
				border: 1px solid black;
				position: relative;
				float: left;
				margin:20px;
				overflow: hidden;
			}
			#bbox{
				position: absolute;
				left: 0;
				top: 0;
			}
			#new{
				width: 400px;
				height: 400px;
				background: blue;
				position: absolute;
				top: 0;
				left: 0;
				/*背景设置成透明*/
				opacity: 0;
				/*鼠标变成十字*/
				cursor: crosshair;
			}
			#box,#right{
				display: none;
			}
		</style>
	</head>
	<body>
	
	    <div id="left">
	    	<div id="box"></div>
	    	<div id="new"></div>
	    </div>
	    
	    <div id="right">
	    	<img id="bbox" src="../HTML/img/big.jpg"></img>
	    </div>
	    
	    <script>

	    	var left=document.getElementById("left");
	    	var box=document.getElementById("box");
	    	var right=document.getElementById("right");
	    	var bbox=document.getElementById("bbox");
	    	var newleft=document.getElementById("new");
	    	
//	    	给左侧小图加鼠标移动事件
            newleft.onmousemove=function(e){
//          	鼠标移动函数
                var move=window.event||e;
//              获得兼容的事件对象
                var move_left=move.offsetX||e.offsetX;
//              获得鼠标距离事件源的位置
                var move_top=move.offsetY||e.offsetY;

//              为了让鼠标在色块中心时色块开始正式移动,所以鼠标位置减去色块的一边才是色块距离边框的真实距离
                var box_left=move_left-110;
                var box_top=move_top-100;

              当计算好的距离小于0时,不再让色块在移动而是等于0
              if(box_left<0){
              	box_left=0;
              }
              if(box_top<0){
              	box_top=0;
              }
              if(box_left>180){
              	box_left=180;
              }
              if(box_top>200){
              	box_top=200;
              }

//              将计算好的位置赋值给色块
                box.style.left=box_left+"px";
                box.style.top=box_top+"px";
                             
             var bbox_left=box_left*-2;
             var bbox_top=box_top*-2;
//           将计算的值赋值
             bbox.style.left=bbox_left+"px";
             bbox.style.top=bbox_top+"px";
             
            }
//          鼠标移入事件
            newleft.onmouseover=function(){
            	box.style.display="block";
            	right.style.display="block";
            }
//          鼠标移出事件
            newleft.onmouseout=function(){
            	box.style.display="none";
            	right.style.display="none";
            }
	    </script>
	</body>
</html>

9.效果

在这里插入图片描述

本文链接：https://blog.csdn.net/qq_41141657/article/details/88621260

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

cleanmymac2022恢复Mac数据、快速清理Mac垃圾文件_cleanmymacx恢复_CoCo玛奇朵的博客-程序员秘密

Mac清理工具CleanMyMac X的下载、安装与激活是如何进行的。

python安装anaconda 深度学习环境搭建_anaconda安装深度学习环境_wwjloves2study的博客-程序员秘密

**官网：**只有3.7和2.6版本（截止2020年3月5日）https://www.anaconda.com/distribution/**清华镜像：**3.5之前的版本https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/参考文章：1. 安装anaconda，两个对勾都选择，输入1测试成功没2. 在安装Anaconda之前，有的已...

jsp中jstl标签的条件判断语法_fngang的博客-程序员秘密

1. if结果2. choose 结果1 结果2 ... 结果3 注意:1. 当多个符合条件时,只执行第一个符合条件的 2. 当所有都不符合条件时,执行的内容3. 必须为内的最后一个

3天，我把MySQL索引、锁、事务、分库分表撸干净了！_公众号:方志朋的博客-程序员秘密

最近项目增加，缺人手，面试不少，但匹配的人少的可怜。跟其他组的面试官聊，他也抱怨了一番，说候选人有点儿花拳绣腿，回答问题不落地，拿面试最常问的MySQL来说，并不只是懂“增删改查”、表关联...

基于EM算法的文本聚类_语义聚类学习的em算法_mykeylock的博客-程序员秘密

文本聚类问题：一个文本为一个向量，向量的长度为字典的长度，这个向量中的每个值为0或1，表示这个单词是否在该文章中出现。假设为二分类，则每个向量对应一个分类值，分类值为0或1，如果为三分类，则分类值为0,1,2。而这个标签值为隐变量Z。这里的观测O为具体的各个向量。在这个模型里，参数是什么呢？我们需要由参数出发，经由隐变量，计算得到观测O，因此这里的参数设计可以类似于隐马尔可夫模型的

mysql update join关联表语句__xiaoxiong的博客-程序员秘密

我们经常使用join子句来查询表中的行(在INNER JOIN的情况下)，或者可能没有(在LEFT JOIN的情况下)另一个表中的相应行。在MySQL中，可以在UPDATE语句中使用JOIN子句执行跨表更新。MySQL UPDATE JOIN的语法如下：UPDATE T1, T2,[INNER JOIN | LEFT JOIN] T1 ON T1.C1 = T2. C1SET T1.C2...

随便推点

《嵌入式系统 – 玩转ART-Pi开发板(基于RT-Thread系统)》第9章基于Select/Poll实现并发服务器（二）_lwip_select_Bruceoxl的博客-程序员秘密

基于Select/Poll实现并发服务器（一）9.3 Select/Poll概述在LWIP中，如果要实现并发服务器，可以基于Sequentaial API来实现，这种方式需要使用多线程，也就是为每个连接创建一个线程来处理数据。而在资源受限的嵌入式设备来说，如果为每个连接都创建一个线程，这种资源的消耗是巨大的，因此，我们需要换一种实现思路，也就是使用IO多路复用的机制来实现，也就是select机制。Select/Poll则是POSIX所规定，一般操作系统或协议栈均有实现。值得注意的是，poll和sel