原理

1.鼠标在小图片上移动时，通过捕获鼠标在小图片上的位置，定位大图片的相应位置

设计

1.页面元素：小图片、大图片、放大镜

2.技术点：事件捕获、定位

1）onmouseover：会在鼠标指针移动到指定的对象上时发生

2）onmouseout：会在鼠标指针移出指定的对象时发生

3）onmousemove：会在鼠标指针移动时发生

4）各边距表示

5）ofgsetLeft与style.left对比

style.left返回的是字符串，比如：30px，offsetLeft返回的是数值30

style.left是可读写的，offsetLeft是只读写的，所以该改变div的位置，只能修改style.left

style.left的值需事件定义，否则取到的值为空

3.难点：计算

objMark.onmousemove = function (ev) {

　　var _event = ev || window.event;  //兼容多个浏览器的event参数模式

   var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;

   var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

　　//当放大镜出超出横向范围的时候

   if (left < 0) {

       left = 0;

   } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {

       left = objMark.offsetWidth - objFloatBox.offsetWidth;

   }

　　//当放大镜查出纵向范围的时候

   if (top < 0) {

        top = 0;

   } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {

        top = objMark.offsetHeight - objFloatBox.offsetHeight;

   }

   objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言

   objFloatBox.style.top = top + "px";

   var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);

   var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

   objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";

   objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";

}

源码

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>放大镜</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        #demo {

            display: block;

            width: 400px;

            height: 255px;

            margin: 50px;

            position: relative;

            border: 1px solid #ccc;

        }

        #small-box {

            position: relative;

            z-index: 1;

        }

        #float-box {

            display: none;

            width: 160px;

            height: 120px;

            position: absolute;

            background: #ffffcc;

            border: 1px solid #ccc;

            filter: alpha(opacity=50);

            opacity: 0.5;

        }

        #mark {

            position: absolute;

            display: block;

            width: 400px;

            height: 255px;

            background-color: #fff;

            filter: alpha(opacity=0);

            opacity: 0;

            z-index: 10;

        }

        #big-box {

            display: none;

            position: absolute;

            top: 0;

            left: 460px;

            width: 400px;

            height: 300px;

            overflow: hidden;

            border: 1px solid #ccc;

            z-index: 1;;

        }

        #big-box img {

            position: absolute;

            z-index: 5

        }

    </style>

    <script>

        //页面加载完毕后执行

        window.onload = function () {

            var objDemo = document.getElementById("demo");

            var objSmallBox = document.getElementById("small-box");

            var objMark = document.getElementById("mark");

            var objFloatBox = document.getElementById("float-box");

            var objBigBox = document.getElementById("big-box");

            var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

            objMark.onmouseover = function () {

                objFloatBox.style.display = "block"

                objBigBox.style.display = "block"

            }

            objMark.onmouseout = function () {

                objFloatBox.style.display = "none"

                objBigBox.style.display = "none"

            }

            objMark.onmousemove = function (ev) {

                var _event = ev || window.event;  //兼容多个浏览器的event参数模式

                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;

                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                if (left < 0) {

                    left = 0;

                } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {

                    left = objMark.offsetWidth - objFloatBox.offsetWidth;

                }

                if (top < 0) {

                    top = 0;

                } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {

                    top = objMark.offsetHeight - objFloatBox.offsetHeight;

                }

                objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言

                objFloatBox.style.top = top + "px";

                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);

                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";

                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";

            }

        }

    </script>

</head>

<body>

<div id="demo">

    <div id="small-box">

        <div id="mark"></div>

        <div id="float-box"></div>

        <img src="macbook-small.jpg"/>

    </div>

    <div id="big-box">

        <img src="macbook-big.jpg"/>

    </div>

</div>

</body>

</html>

效果：

JS放大镜特效（兼容版）的更多相关文章

  1. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  2. js放大镜特效

    在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效 下图是原图的样子                                 ...

  3. 案例：用JS实现放大镜特效

    案例:用JS实现放大镜特效 案例:用JS实现放大镜特效

  4. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  5. JQuery仿购物网站放大镜特效所遇问题及思考

    JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...

  6. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  7. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  8. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  9. Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

随机推荐

  1. CSS3+HTML5特效3 - 纵向无缝滚动

    老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...

  2. 使用WebBrowser控件时在网页元素上绘制文本或其他自定义内容

    原文:使用WebBrowser控件时在网页元素上绘制文本或其他自定义内容 第一次在CNBlogs上发Post是提出一个有关使用WebBrowser控件时对SELECT网页元素操作的疑惑,这个问题至今也 ...

  3. C_数据结构

    线性结构 线性结构的特点是:在数据元素的飞空有限集中,(1)存在唯一的一个被称作“第一个”的数据元素:(2) 存在唯一一个被称做“最后一个”的数据元素:(3)除第一个外,集合中的每一个元素都只有一个前 ...

  4. 第3章2节《MonkeyRunner源码剖析》脚本编写示例: MonkeyDevice API使用示例(原创)

    天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...

  5. WCF服务上应用protobuf

    WCF服务上应用protobuf Web api  主要功能: 支持基于Http verb (GET, POST, PUT, DELETE)的CRUD (create, retrieve, updat ...

  6. Asp.net TextBox只能输入数字

    原文:Asp.net TextBox只能输入数字 <asp:textbox id="TextBox1" onkeyup="if(isNaN(value))execC ...

  7. DDD分层架构之仓储

    DDD分层架构之仓储(层超类型基础篇) 前一篇介绍了仓储的基本概念,并谈了我对仓储的一些认识,本文将实现仓储的基本功能. 仓储代表聚合在内存中的集合,所以仓储的接口需要模拟得像一个集合.仓储中有很多操 ...

  8. Java 之JavaBean 、EJB 和POJO

    由于是创业公司,开发人员较少,所以公司临时决定让几个C的程序猿临时客串Java.所以避免不了有很多基础问题,今天就有两个人都问我,JavaBean和POJO的区别,我可按照自己的理解给他们大致说了下, ...

  9. [译]Java垃圾回收是如何工作的

    说明:这篇文章来翻译来自于Javapapers 的How Java Garbage Collection Works 这部分教程是为了理解Java垃圾回收的基础以及它是如何工作的.这是垃圾回收系列教程 ...

  10. HDOJ 5063 Operation the Sequence

    注意到查询次数不超过50次,那么能够从查询位置逆回去操作,就能够发现它在最初序列的位置,再逆回去就可以求得当前查询的值,对于一组数据复杂度约为O(50*n). Operation the Sequen ...