华山资源网

javascript淘宝主图放大镜功能
网络编程 2024/11/16 佚名
3 1

工欲善其事，必先利其器。想要实现某一种效果，我们必须要先了解其中的原理。
放大镜的功能就是通过获取鼠标在小图中的位置，然后根据大小图的尺寸比例换算出大图需要显示的部分，然后使用定位让大图要显示的部分出现在右边的边框内。
然后看代码，根据代码看讲解会更容易理解。

html部分

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>放大镜效果</title> 
 <link rel="stylesheet" href="magnifier.css"> 
</head> 
<body> 
 <div id="wrapper"> 
 <!--小图--> 
  <div id="img_min"> 
  <!--图片--> 
  <img src="/UploadFiles/2021-04-02/test.jpg">


css部分







*{ 
 margin: 0; 
 padding: 0; 
} 
div{ 
 position: relative; 
} 
div>div{ 
 width: 300px; 
 height: 300px; 
 float: left; 
 margin: 100px; 
 overflow: hidden; 
} 
#img_min>img{ 
 /*display: block;*/ 
 width: 300px; 
} 
#img_max{ 
 display: none; 
  
} 
#img_max>img{ 
 position: absolute; 
 top: 0; 
 left: 0; 
 display: block; 
 width: 1500px; 
} 
#mousebg{ 
 display: none; 
 position: absolute; 
 width: 60px; 
 height: 60px; 
 background-color: rgba(255,255,255,.7); 
 top: 0; 
 left: 0; 
} 





最重要的javascript部分





window.onload = function () { 
 var img1 = document.getElementById('img_min');//小图盒子 
 var img2 = document.getElementById('img_max');//大图盒子 
 var img2_img = document.getElementById('img2_img');//大图图片 
 var wrap = document.getElementById('wrapper'); 
 var mousebg = document.getElementById('mousebg');//鼠标白块 
 var mul = 5; 
 //当某一个模块dispaly:none的时候不能使用offsetWidth获取它的宽高 
 img1.onmouseover = function () { 
  //鼠标进入 
  img2.style.display = 'block'; 
  mousebg.style.display = 'block'; 
   
 } 
 img1.onmouseout = function () { 
  //鼠标离开 
  img2.style.display = 'none'; 
  mousebg.style.display = 'none'; 
 } 
 img1.onmousemove = function (event) { 
  var _event = event||window.event;//兼容性处理 
  var mouseX = _event.clientX - wrap.offsetLeft - img1.offsetLeft; 
  //计算鼠标相对与小图的位置 
  var mouseY = _event.clientY - wrap.offsetTop - img1.offsetTop; 
 
  //特殊情况处理，分别靠近四条边的时候 
  if(mouseX<mousebg.offsetWidth/2){ 
   mouseX = mousebg.offsetWidth/2; 
  } 
  if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
   mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
  } 
  if(mouseY<mousebg.offsetHeight/2){ 
   mouseY = mousebg.offsetHeight/2; 
  } 
  if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
   mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
  } 
  //计算大图的显示范围 
  img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
  img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 
  //使鼠标在白块的中间 
  mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; 
  mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px"; 
   
 } 
} 







如果你看完代码和注释已经理解了，用李云龙的一句话说：“哎呀，你小子tnd还真是个天才”。那么下面的解析部分你快速的浏览完就OK了。


解析部分：


html和css部分都是简单的布局代码，不再讲解，js部分代码也比较简单，我们直接讲解鼠标移动事件部分的代码。

首先用一张图来解释一下获取鼠标相对与小图位置的原理：


javascript淘宝主图放大镜功能


可以看到通过代码中的运算，我们所获取的值就是鼠标相对于img1左上角的值。

理解了这一步之后，其实可以说我们的工作已经完成了一半了。

然后，我们先跳过特殊情况的处理，直接进行右边图片定位的基本运算。

因为有用到offsetWidth、offsetHeight、style.width、style.height属性，其中style.width、style.height和offsetWidth、offsetHeight的范围是相同的，其他不同我会在另一篇博客中详细描述。我们先用一张图了解下这几个属性，同时和上面的几个属性进行对比（图片来自互联网，侵删）


javascript淘宝主图放大镜功能


然后我们讲解代码：


右边大图框中的图片使用style.left定位在大图框中的位置，负号是因为我们鼠标的运动方向刚好是和我们大图框中的图片运动的方向相反，mul则是根据大图和小图的尺寸计算出来的比例，-mul*mouseX计算出来的其实就是图片在大图框中的相对位置，但是此时你会发现你鼠标所在的位置在右边是在图框的左上角的，所以我们要加上一个 img2.offsetWidth/2 来让图片居中显示。同样我们在纵坐标进行相同的处理就好了。







//计算大图的显示范围 
  img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
  img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 






下面我们就要进行特殊情况的处理了，做到上一步的时候你会发现，在鼠标移动到边缘的时候，鼠标那个小白块有时候会跑出图片的范围，所以我们就要进行处理将它限制在图片的范围内，因为鼠标是在白色透明块的中间，所以我们就是将鼠标限制在距离图片边框上下左右二分之一白块长/宽的位置即可。







//特殊情况处理，分别靠近四条边的时候 
  if(mouseX<mousebg.offsetWidth/2){ 
   mouseX = mousebg.offsetWidth/2; 
  } 
  if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
   mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
  } 
  if(mouseY<mousebg.offsetHeight/2){ 
   mouseY = mousebg.offsetHeight/2; 
  } 
  if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
   mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
  } 






当距离左边小于二分之一宽的时候，我们就让mouseX等于二分之一宽，这样白块就不会继续移动，其他三个方向同理。

做完这一步，我们的效果也就全部完成了。

ps:抽象的地方可以通过画图来帮助理解。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com