首页 / JAVASCRIPT / 怎样做出京东商品详情的放大镜效果

怎样做出京东商品详情的放大镜效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了怎样做出京东商品详情的放大镜效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3242字，纯文字阅读大概需要5分钟。

内容图文

京东放大镜效果


怎样做出京东商品详情的放大镜效果 - 文章图片

实现放大镜主要知识点

  • javascript中DOM操作。

  • javascript中时间的获取，主要有mouseenter、mouseleave、以及当鼠标在照片上移动的时候onmousemove事件以及其中的事件对象中的属性clientY，clientX,还有获取元素宽度offsetWidth、offsetHight等。

  • 这里面好考虑到绝对定位，以及放大倍率的计算，里面用到的倍率计算公式（小框里面的放大区域面积/小框面积）=（大框的面积/大筐里的大照片的面积）//大照片的原理是将其放在大框里，将大框的css样式设置为overflow：hidden,这样可以将你小筐里的区域按比例显示在大框里面。

具体代码实现情况如下

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <style type="text/css">
            *{                margin: 0;                padding: 0;            }
            #small{                float: left;                width:450px;                height:450px;                border: 1px solid black;                margin-left: 100px;                position:absolute;            }
            #big{                float: left;                width:600px;                height:600px;                overflow: hidden;                border: 1px solid black;                position: absolute;                left:600px;                top: 0px;            }
            #magnifying{                width: 200px;                height:200px;                background-color: cornflowerblue;                opacity: 0.4;                left: 0px;                top: 0px;                position: absolute;            }
            #bigImg{                position: absolute;                width: 1350px;                height:1350px;            }
        </style>
    </head>
    <body>
        <p id="small">
            <img src="img/1.png" />//记得将其设置与小框大小一致            <p id="magnifying"></p>
        </p>
        <p id="big">
            <img src="img/2.jpg" id="bigImg" />
        </p>
        <script type="text/javascript">
            var small=document.getElementById("small");            var magnifying=document.getElementById("magnifying");            var big=document.getElementById("big");            var bigImg=document.getElementById("bigImg");

            small.onmouseenter=function(){
                magnifying.style.display="block";
                bigImg.style.display="block"
            }
            small.onmouseleave=function(){
                magnifying.style.display="none";
                bigImg.style.display="none";
            }
            small.onmousemove=function(event){
                var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2;                var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2;                var leftMax=small.offsetWidth-magnifying.offsetWidth;                var topMax=small.offsetHeight-magnifying.offsetHeight;                //限制鼠标移动的区域
                left = left<=0 ? 0 : left;
                top = top <=0? 0:top;                //限制右边界与下边界
                left =left>=leftMax?leftMax:left;
                top =top>=topMax?topMax:top;

                magnifying.style.left=left+"px";
                magnifying.style.top=top+"px";                //核心代码
                var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth);                var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
                bigImg.style.left=imgLef+"px";
                bigImg.style.top=imgTop+"px";
            }        </script>
    </body></html>

这样就可以实现放大效果啦，希望这些能对对大家有所帮助。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

JS的设计模式之构造函数模式详解

前端为什么要使用模块化？

web前端关于浏览器兼容性问题的解决方案

以上就是怎样做出京东商品详情的放大镜效果的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的怎样做出京东商品详情的放大镜效果全部内容，希望文章能够帮你解决怎样做出京东商品详情的放大镜效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/294317.html

来源：【匿名】