网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > javascript

JavaScript实现图片预览放大镜效果(含源码)

2022/1/11 16:43:49

我们在网上经常会碰到图片预览鼠标经过局部放大图片的效果,今天我们就来看看这个效果是如何实现的。实现方法 借助宽高等比例放大的两张图片,结合JavaScript中鼠标偏移量、元素偏移量、元素自身宽高等属性完成; 左侧遮罩移动Xpx,右侧大图移动X*倍数px;看…

        我们在网上经常会碰到图片预览鼠标经过局部放大图片的效果,今天我们就来看看这个效果是如何实现的。

  • 实现方法

        借助宽高等比例放大的两张图片,结合JavaScript中鼠标偏移量、元素偏移量、元素自身宽高等属性完成;

        左侧遮罩移动Xpx,右侧大图移动X*倍数px;看起来是不是很简单呢,下面我们就来看看具体如何实现。

  • 举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript实现图片预览放大镜效果(含源码)www.woaidaogu.com</title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .wrap {
            height: 480px;
            margin: 30px;
        }
        #small {
            width: 600px;
            height: 400px;
            position: relative;
        }
        #small img {
            width: 100%;
            height: 100%;
        }
        .wrap div {
            float: left;
            margin-right: 10px;
        }
        #big {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
            display: none;
        }
        #hua {
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #move {
            width: 100px;
            height: 100px;
            background: #000;
            opacity: 0.5;
            position: absolute;
            display: none;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <div>
        <div id="small">
            <img src="images/hua.jpg" />
            <p id="move"></p>
        </div>
        <div id="big">
            <img src="images/hua.jpg" id="hua" />
        </div>
    </div>
    <script type="text/javascript">
        var move = document.getElementById('move');
        var small = document.getElementById('small');
        var big = document.getElementById('big');
        var hua = document.getElementById('hua');
        small.onmousemove = function (event) {
            event = event || window.event;
            this.style.cursor = 'move';
            // 计算move移动块的left值
            var move_left = event.clientX - this.offsetLeft - move.offsetWidth / 2;
            // 计算move移动块的top值
            var move_top = event.clientY - this.offsetTop - move.offsetHeight / 2;
            // 超出左边界赋值为0
            move_left = move_left < 0 ? 0 : move_left;
            // 超出右边界赋值为盒子宽度-移动块的宽度
            move_left = move_left > this.offsetWidth - move.offsetWidth ? this.offsetWidth - move.offsetWidth : move_left;
            // 超出上边界赋值为0
            move_top = move_top < 0 ? 0 : move_top;
            // 超出下边界赋值为盒子高度-移动块高度
            move_top = move_top > this.offsetHeight - move.offsetHeight ? this.offsetHeight - move.offsetHeight : move_top;
            // 修改移动块left、top值
            move.style.left = move_left + 'px';
            move.style.top = move_top + 'px';
            /*
                计算图片需要移动的坐标
                距离左边left    图片宽度      盒子宽度          距离左边left    图片宽度           盒子宽度
                big_x/(hua.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);
                big_y/(hua.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);
            */
            var big_x = (move_left / (small.offsetWidth - move.offsetWidth)) * (hua.offsetWidth - big.offsetWidth);
            var big_y = (move_top / (small.offsetHeight - move.offsetHeight)) * (hua.offsetHeight - big.offsetHeight);
            // 修改图片定位
            hua.style.left = -big_x + 'px';
            hua.style.top = -big_y + 'px';
        };
        small.onmouseover = function () {
            move.style.display = 'block';
            big.style.display = 'block';
        };
        small.onmouseout = function () {
            move.style.display = 'none';
            big.style.display = 'none';
        };
    </script>
</body>
</html>

image.png

        查看在线实例

        通过以上内容我们知道了JavaScript如何实现图片预览放大镜效果,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • js如何遍历数组保存需要的

    我们如何通过遍历数组删除不需要的,保留需要的内容呢?我们来看看下面的代码是如何实现的。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>js如何遍历数组保存需要的</title> <meta http-…

    2021/5/16 21:43:10
  • js写的urldecode函数及作用

    本函数对字符串进行URL解码。例如通过urlencode编码后的字符串,可通过UrlDecode进行解码。对Url路径加码的函数是UrlEncode 用法相反,和UrlDecode是一致对应的URLEncode是这样编码的 1、数字和字母不变。 2、空格变为"+"号。 3、其他被编码成&…

    2021/5/16 16:25:41
  • js getelementbyid后获取下一级的ID的方法

    根据id获取父对象,然后使用childNodes获取所有子对象数组,关键代码:document.getElementById(div_id).childNodes; // 子对象数组实现代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh…

    2021/5/9 13:28:27
  • javascript使用settimeout闭包实现倒计时

    闭包知识1、闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。2、闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理因为函数内部声明 的变量是局部的,只能在函数内部访问到,但是函数外…

    2021/4/24 19:56:28
  • js定时器setInterval清除之后还会执行

    今天在博客上看到有人问js定时器setInterval清除之后还会执行,他是js定时器控制一个盒子做旋转动画,离开页面后js定时器还在执行,但是盒子这个dom却被浏览器消除了,以至于再次进入该页面时动画会加速执行。解决方法 离开页面时清除定时器 进入时重新开启定时器d…

    2021/4/24 16:06:27
  • js添加删除表格table行列-附源码

    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-…

    2021/3/26 21:48:19
  • js如何判断页面某个元素是否已经绑定某个事件?

    我们有时防止页面元素重复绑定事件,需要判断一下页面对应的元素是否已经绑定了事件,下面就是我写了一个javascript函数用来判断页面某个元素是否已经绑定某个事件:javascript代码var div = document.getElementById(div);logEvent(click , div , false , false , funct…

    2021/3/24 21:20:27
  • A域名js访问B域名对象如何实现?JavaScript跨域解决办法

    什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无…

    2021/3/11 22:44:58
  • js如何模拟手机平板移动设备--触摸、点击、滑屏(附源码)

    前一阵子公司做项目,手机上的网页需要js来模拟手机平板等移动设备的触摸、点击、滑屏效果,直接上代码,供大家参考(function(doc, win, undefined) { "use strict"; var start = { //记录开始的触点 x: 0, y: 0 }, …

    2021/2/28 22:08:08
  • 一张图教你彻底搞清楚javascript中的top、clientTop、scrollTop、offsetTop都是什么?

    clipboardscrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父…

    2021/2/28 21:52:11