原理

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. foj 2082 树链剖分 第2天

    擦,没啥好说的,这个模板至少得打10遍..纪念自己成功的打错了.. #include <iostream> #include <cstdio> #include <cst ...

  2. Unix/Linux环境C编程新手教程(41) C语言库函数的文件操作具体解释

     上一篇博客我们解说了怎样使用Linux提供的文件操作函数,本文主要解说使用C语言提供的文件操作的库函数. 1.函数介绍 fopen(打开文件) 相关函数 open,fclose 表头文件 #in ...

  3. 去除a标签链接触摸时产生边框

    排除误解 网络资料说这个属性只用于iOS(iPhone和iPad),其实是错误的,android手机大部分也是支持的,只是显示效果不一样,移动开发并不成熟,更多的还需要大家去实践来辨别真伪- - -w ...

  4. Nancy和MVC的简单对比

    Nancy和MVC的简单对比 在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy ...

  5. mysql设置root的密码

    mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass');

  6. SQL点滴5—产生时间demention，主要是时间转换

    原文:SQL点滴5-产生时间demention,主要是时间转换 数据仓库中有时间表,存储时间信息,这个存储过程接收开始时间结束时间,写入时间具体信息.有高手用excel函数功能很快能产生INSERT语 ...

  7. jekyll bootstrap搭建github blog

    前提你必须有一个GitHub账号且本机安装有Git 一.创建一个新的仓库 去你的https://github.com主页新建一个仓库 名字为USERNAME.github.com USERNAME为你 ...

  8. [翻译]如何编写GIMP插件(一)

    近期想尝试编写gimp插件,在gimp官网看到了三篇简明教程,顺便翻译了下,由于本人英文,计算机知识有限,文中难免有warning,error出现,欢迎指正. <How to write a G ...

  9. SUI Mobile框架开发，android、ios表单遇到的问题

    1.页面添加区域滚动,滚动区域内元素事件无效问题 解决方法: <script type="text/javascript" charset="utf-8" ...

  10. 对于发Github的contributions贡献不会增加

    最近发现每天在 Github 做代码提交,可是 contributions 的面板(贡献图)上的绿点(即贡献值)却没有增长了.擦~ 有两个礼拜了. 例如以下图并且.同一时候发现曾经的绿点也是稀稀拉拉的 ...