JavaScript实现的网页放大镜效果-阿里云开发者社区

开发者社区> 郭璞> 正文

JavaScript实现的网页放大镜效果

简介: 今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
+关注继续查看

今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。


实现的原理


  • 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。
  • 核心:鼠标事件的获取和处理。图片显示的时候的放大比例的处理。

编码实现


  • 大结构是如下:
    外边套一个最大的区域块,然后再里面添加不同的显示。
<body>
<div id="demo">
<!--小图片显示区域-->
    <div id="small-box">
    <!--mark表示小图片的边界,float-box则代表放大镜的id-->
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="img/small.jpg"/>
    </div>
<!--大图片显示区域-->
    <div id="big-box">
        <img src="img/big.jpg"/>
    </div>
</div>
</body>
</html>

  • 然后是样式表的设置。注意对放大镜的图层的处理。主要是和背景图层的色差很明显,便于观察。
* {
            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
        }

  • 再就是核心的编码了。那就是js代码的逻辑处理,主要是关于鼠标的三个动作事件的捕获和相应的处理。onmouseover,onmouseout,onmousemove三个函数。
  • `
    //注意是页面加载完成后才会执行js代码
    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参数模式
    
            /**
             * 这里的clientX是指鼠标在浏览器中的绝对坐标位置,也就是计算网页中图片的位置。然后进行绝对化的图片显示的过程
             */
            var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
            var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
    
            /**
             * 此段代码是为了对放大镜区域移出mark标记块的时候的处理。
             * 实现的功能是:放大镜区域只会存在与mark的标记块内部
             */
            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);
    
            /**
             * 这里有亮点需要进行注意:
             * 1.注意负号,因为大图的显示的方向与放大镜的移动方向是相反的
             * 2.注意相乘的比例值的计算
             */
            objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
            objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
        }
    }`
    

效果展示


这里写图片描述


总结


从上面的代码我学到了什么:

  • 首先是分析问题,只有将问题分析的彻底了,后续的步骤才不会出现意想不到的问题。
  • 然后是实现的思路,仔细想想可以通过什么方式来实现这些需求。
  • 耐心的编码,对事件的处理逻辑把握到位!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python3抓取javascript生成的html网页
用urllib等抓取网页,只能读取网页的静态源文件,而抓不到由javascript生成的内容。 究其原因,是因为urllib是瞬时抓取,它不会等javascript的加载延迟,所以页面中由javascript生成的内容,urllib读取不到。
1024 0
【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果
、    今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧,主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。 今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。
1235 0
Asp.net MVC3 企业网站系统高仿博客园 首页左侧列表页面 实现效果
在前一篇文章Asp.net MVC 3 开发企业网站系统仿照博客园部分功能--总体设计中介绍了数据库的总体设计,现在呢我们就来实现博客园的左侧网站分类效果实现。当然因为我的前端功底实在不敢恭维,所以我采用博客园的CSS和JS脚本,这样我们可以提高网站的实现速度,而不用为了前端的显示界面调整浪费时间(注:前端很重要)。
1147 0
JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
1057 0
JavaScript 获取整个网页的完整内容,包括 html 标签。
JavaScript 获取整个网页的完整内容,包括 html 标签。
61 0
WPF中利用RadialGradient模拟放大镜效果
原文:WPF中利用RadialGradient模拟放大镜效果 --------------------------------------------------------------------------------引用时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
756 0
WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文: WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放。
726 0
+关注
郭璞
一切就交给时间,它会给我答案。
369
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载