原理

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. Android锁定EditText内容和随机生成验证码

    昨天写了个小Demo,实现了随机生成验证码,和锁定EditText两个小功能,先看一下效果图: 锁定EditText在我们不须要用户编辑EditText内容的时候能够用到,实现还是非常easy的,一行 ...

  2. .net mvc ajax list post

    http://stackoverflow.com/questions/13242414/passing-a-list-of-objects-into-an-mvc-controller-method- ...

  3. C++中public,protected,private访问

    对于公有继承方式: (1)父类的public成员成为子类的public成员,允许类以外的代码访问这些成员:(2)父类的private成员仍旧是父类的private成员,子类成员不可以访问这些成员:(3 ...

  4. git合并远端分支到本地分支的两种方式

    作者:zhanhailiang 日期:2014-11-21 在使用版本号工具提交改动之前,都须要通过update先将本地代码更新到最新版本号.SVN通过svn update就能够实现,那么git怎样实 ...

  5. 关于s2sh框架关于hibernate懒加载问题的说明和解决方案

    首先我们来看下面这个图,解释了一个web程序的一次请求流程! 懒加载异常的说明: 懒加载就是我们在查询一个对象时,它所有的属性是否要被查出来! 如果懒加载开启的话,session在service层就被 ...

  6. Android开发之Mediaplayer

    Android提供了常见的音频.视频的编码.解码机制.借助于多媒体类MediaPlayer的支持,开发者能够非常方便在在应用中播放音频.视频.本篇博客主要解说在Android平台下怎样播放一个音频文件 ...

  7. sql点滴41—mysql常见sql语法

    原文:sql点滴41-mysql常见sql语法 ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 修改表名:alter table t_book rename ...

  8. weblogic启动报错--com.octetstring.vde.backend.BackendRoot

    错误现象: 使用bea用户启动weblogic时报错,错误信息如下: <2014-7-29 下午07时47分23秒 CST> <Notice> <Log Manageme ...

  9. 如何查找Linux的函数定义的位置？

    网上的许多站点提供这样的服务,如下面这个: http://lxr.free-electrons.com/ident?v=3.10 Linux的错误返回值:3.10版本 Linux/include/ua ...

  10. SQL Server之记录筛选(top、ties、offset)汇总

    一.TOP 筛选 如果有 ORDER BY 子句,TOP 筛选将根据排序的结果返回指定的行数.如果没有 ORDER BY 子句,TOP 筛选将按照行的物理顺序返回指定的行数. 1. 返回指定数目的行 ...