JS放大镜特效（兼容版）

时间：2022-10-22 11:56:33

原理

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

设计

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

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

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

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

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

4）各边距表示

JS放大镜特效（兼容版）

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放大镜特效（兼容版）

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&period;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. 关于dev无法更新、调试的问题

  2. NYOJ题目77开灯问题

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsUAAAHXCAIAAADbX7BCAAAgAElEQVR4nO3dvVLrSMAm4L0Jci6E2B

  3. json在php中的使用之如何转换json为数组

    <?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}' ...

  4. win32 sdk 列表视图控件绘制

    ////////////////////////////////////////////////////////////// LRESULT ListViewCustomDraw(HWND hwnd, ...

  5. spark 文件系统Alluxio（之前名为Tachyon）

    http://www.alluxio.org/documentation/v1.0.0/cn/ http://www.winseliu.com/blog/2016/04/15/alluxio-quic ...

  6. peoplesoft function PSTREENODE 通过 deptid 获得部门树 全路径 code

    create or replace function getUnitFullcode(deptid in varchar) return varchar2 is r ); c int; n ); m ...

  7. python 2&period;7和3&period;7都支持的情况 bit&lowbar;length&lpar;&rpar; pycharm 更改解释器

    1.头部加: #!/usr/bin/env python # -*- coding:utf-8 -*-    2.bit_length() :当前数值为二进制时,至少要用多少为表示 a = 5 b = ...

  8. sqlserver等软件下载

    http://msdn.itellyou.cn/ 找到所需要的,复制下载路径,到迅雷下载

  9. 75道阿里Java面试题，你能答上几道？

    整理了下阿里近几年的java面试题目,大家参考下吧,希望对大家有帮助,可以帮大家查漏补缺. 答对以下这些面试题,可以淘汰掉 80 % 的求职竞争者. 1.hashcode相等两个类一定相等吗?equa ...

  10. 一些很经典的JavaScript的问题

    1.作用域 (function() { var a = b = 5; })(); console.log(b); 输出:5 陷阱是,在函数表达式中有两个赋值,但a是用关键字var 来声明的,这意味着a ...

相关文章