放大镜效果需求：

鼠标放入原图中，会出现一个黄色的遮盖层和一个放大的图片，鼠标移动时候，遮盖层会跟着鼠标一起移动，同时放大的图片会跟着一起移动。

实现过程：

1.鼠标移入，遮盖层和大图片显示

2.鼠标离开，遮盖层和大图片隐藏

3.鼠标移动的时候，遮盖层和鼠标对应移动

4.遮盖层移动时候，大图片跟着移动

效果图：

原图　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　放大镜效果图

                                                            

实现思路：

一、通过设置display属性，让遮盖层和大图片显示（block）和隐藏（none）。

二、获取鼠标在装有的小图片的盒子中的位置，并将该值赋给遮盖层的style.top和style.left属性，即让遮盖层和鼠标移动中位置相等。

三、注意设置遮盖层不能超过小盒子边框。

四、遮盖层移动，让大盒子中的图片跟着移动，大盒子移动位置需要利用数学方法计算。遮盖层移动距离/遮盖层最大移动距离=大图片移动位置/大图片最大移动距离

注意知识点：

一、样式设置

①装大图片的盒子必须设置长宽，如果不设置，大图片不会显示。

②装大图片盒子必须设置overflow：hidden，如果不设置，大图片位置不会固定，在网页总乱动。

③相对定位和绝对定位设置，遵循子绝父相

二、兼容性设置

①事件对象e的兼容性

②位置坐标的兼容性

③鼠标移入和鼠标移出兼容性

onmouseover \ onmouseout 和 onmouseenter \ onmouseleave，前一组对谷歌浏览器放心使用，但是在IE浏览器中会出现bug，起因是事件冒泡，所以选择后面一组。

上述两组事件在不触发事件冒泡的情况下表现是一样的，但是前一组会触发事件冒泡，后一组不会触发事件冒泡。

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>淘宝放大镜效果</title>

         <style type="text/css">

             *{

                 padding: 0px;

                 margin: 0px;

             }

             .box{

                 margin: 100px;

                 width: 350px;

                 height: 350px;

                 position: relative;

                 border: solid 1px gray;

             }

             .cover{

                 width: 150px;

                 height: 150px;

                 opacity: 0.3;

                 background-color: yellow;

                 position: absolute;

                 top: 0px;

                 left: 0px;

                 display: none;

             }

             .big{

                 position: absolute;

                 top: 0px;

                 left: 360px;

                 display: none;

                 overflow: hidden;

                 height: 400px;

                 width: 400px;

             }

             .big img{

                 position: absolute;

             }

         </style>

     </head>

     <body>

         <!-- 一个大盒子，用以控制位置 -->

         <div id="box" class="box">

             <!-- 小图片盒子 -->

             <div class="small">

                 <img src="data:images/small.jpg" width="350px">

                 <!-- 遮盖层 -->

                 <div class="cover"></div>

             </div>

             <!-- 大图片 -->

             <div class="big">

                 <img src="data:images/big.jpg" width="600px">

             </div>

         </div>

         <script type="text/javascript">

             // 1.获取需要操作的元素

             var box=document.getElementById('box');

             var smallBox=box.children[0];

             var bigBox=box.children[1];

             var cover=smallBox.children[1];

             var bigImage=bigBox.children[0];

             //2.鼠标移动进入小盒子,遮盖层和大图片出现

             box.onmouseenter=function(){

                 cover.style.display="block";

                 bigBox.style.display="block";

             }

             //3.鼠标离开小盒子,遮盖层和大图片隐藏

             box.onmouseleave=function(){

                 cover.style.display="none";

                 bigBox.style.display="none";

             }

             //4.鼠标移动,遮盖层跟着移动,并且鼠标点位于遮盖层的中心位置

             box.onmousemove=function(e){

                 e = e || window.event;

                 //实现思路:鼠标在盒子中的位置=鼠标在文档中位置-盒子位置

                 var mouse_in_documentX=e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);

                 var mouse_in_documentY=e.pageY || e.clientY+(document.documentElement.scrollTop || document.body.scrollTop);

                 //鼠标在盒子中的位置,就是遮盖层的位置

                 var mouse_in_boxX=mouse_in_documentX-box.offsetLeft;

                 var mouse_in_boxY=mouse_in_documentY-box.offsetTop;

                 //让鼠标位于遮盖层的中央

                 var coverX=mouse_in_boxX - cover.offsetWidth/2 ;

                 var coverY=mouse_in_boxY - cover.offsetHeight/2;

                 //遮盖层不能超过小盒子范围

                 coverX= ( coverX < 0 ) ? 0 : coverX;

                 coverY= ( coverY < 0 ) ? 0 : coverY;

                 coverX=( coverX > ( box.offsetWidth - cover.offsetWidth)) ? ( box.offsetWidth - cover.offsetWidth) : coverX;

                 coverY=( coverY > ( box.offsetHeight - cover.offsetHeight)) ? ( box.offsetHeight - cover.offsetHeight) : coverY;

                 cover.style.top=coverY + 'px';

                 cover.style.left=coverX + 'px';

                 //当遮盖层移动的时候,大图片跟着遮盖层移动(比例关系换算问题)

                 //公式：遮盖层移动距离/遮盖层最大移动距离=大图片移动距离/大图片最大移动距离

                 //故:大图片移动距离=遮盖层移动距离/遮盖层最大移动距离*大图片最大移动距离

                 //遮盖层最大距离

                 var coverMax=box.offsetWidth-cover.offsetWidth;

                 //大图片最大移动距离

                 var bigImageMax=bigImage.offsetWidth-bigBox.offsetWidth;

                 var bigImageX=coverX*bigImageMax/coverMax;

                 var bigImageY=coverY*bigImageMax/coverMax;

                 bigImage.style.top=-bigImageY+'px';

                 bigImage.style.left=-bigImageX+'px';

             }

         </script>

     </body>

 </html>

javascript--淘宝页面的放大镜效果的更多相关文章

  1. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  2. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  3. selenium+python自动化84-chrome手机wap模式（登录淘宝页面）

    前言 chrome手机wap模式登录淘宝页面,点击验证码无效问题解决. 切换到wap模式,使用TouchActions模块用tap方法触摸 我的环境 chrome 62 chromedriver 2. ...

  4. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  5. 使用CURL抓取淘宝页面

    /** * 根据地址抓取淘宝页面html代码 * @param type $url 地址 * @return boolean */ public function getTaoBaoHtml($url ...

  6. Android：实现仿 美团/淘宝 多级分类菜单效果

    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...

  7. C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果

    需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...

  8. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  9. 用HTML编写淘宝页面

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. cordova 开发 android app 简要流程

    1. 安装cordova:npm install -g cordova --registry=https://registry.npm.taobao.org 2. 创建cordova工程:进入工作目录 ...

  2. ANR android

    1.android ANR产生原因和解决办法 2.Android ANR异常及解决方法 3.Android ANR 分析解决方法 4.[原创]Android 系统稳定性 - ANR(一) 5.[原创] ...

  3. JS高级程序设计第三版——JavaScript简介

    JavaScript简史 JavaScript由Netscape(网景)公司在1995年发布,最开始的主要目的是处理以前由服务器端语言负责的一些输入验证操作,以便提高用户体验,后来就慢慢的发展为一门强 ...

  4. web端 调试 手机混合应用中的h5部分（chrome浏览器的devtool使用）

    Learning Hybird App Test–Appium Java(Leyden) 浏览器的远程调试工具,使得我们可以通过PC上开启的控制台,调试手机浏览器中正在运行的代码.运行于 Androi ...

  5. 查看oracle固定目录下日志和trace文件大小脚本

    python刚入门,在Oracle官网看到个小脚本,感觉挺有意思,经过测试切实可行. [oracle@ycr python]$ more 5.py import datetimeimport osim ...

  6. elasticsearch 概念

    elasticsearch 来源:https://baike.baidu.com/item/elasticsearch/3411206?fr=aladdin ElasticSearch是一个基于Luc ...

  7. 在已有软件加壳保护 下实现 Inline hook

    如写的不好请见谅,本人水平有限. 个人简历及水平:. http://www.cnblogs.com/hackdragon/p/3662599.html 正常情况: 接到一个项目实现对屏幕输出内容的获取 ...

  8. ACM-ICPC (10/11)

    莫比乌斯 今年的多校比赛,莫比乌斯反演的题目经常出现,但是我们队对于这种题可以说是直接放掉,不是因为没学过,多少了解一些,但是也只是皮毛,导致根本就做不出来,其实想一想,其实次数多了,就可以看出原因了 ...

  9. CF873F 【Forbidden Indices】

    还有这么板子的题? 和你谷上后缀自动机的板子基本一样,区别就是之后这个位置是\(0\)才计入贡献 代码 #include<iostream> #include<cstdio> ...

  10. HDU 1083 Courses 【二分图完备匹配】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1083 Courses Time Limit: 20000/10000 MS (Java/Others)  ...