找回密码
当前位置：前端开发者 > JavaScript > 正文

前端JS电商放大镜效果

2018-10-12 分类：JavaScript 阅读(729) 评论(0)

初识前端与移动开发到项目开发 web前端与移动开发 前端开发视频下载

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>26-电商放大镜</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        #left {
            padding: 0;
            margin: 0;
            width: 400px;
            height: 400px;
            border: 2px solid blue;
            background: url(https://www.rokub.com/wp-content/uploads/2018/04/8fa34e18-2ba1-11e8-978e-8c859074c15d-520×245.png) no-repeat;
            float: left;
            cursor: crosshair;
            position: relative;
            box-sizing: border-box;
        }
        #box {
            width: 200px;
            height: 200px;
            background: white;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            box-sizing: border-box;
        }
        #cover {
            width: 400px;
            height: 400px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            box-sizing: border-box;
        }
        #right {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            overflow: hidden;
            position: relative;
            display: none;
            box-sizing: border-box;
        }
        #rpic {
            position: absolute;
        }
    </style>
    <script type=”text/javascript”>
        window.onload = function () {
            var left = document.getElementById(“left”);
            var right = document.getElementById(“right”);
            var rpic = document.getElementById(“rpic”);
            var box = document.getElementById(“box”);
            var cover = document.getElementById(“cover”);
            // 给左侧加鼠标移动事件
            cover.onmousemove = function () {
                //获得事件对象
                var ev = window.event;
                var mouse_left = ev.offsetX || ev.layerX;
                var mouse_top = ev.offsetY || ev.layerY;
                // document.title = mouse_left + ‘|’ + mouse_top;
                //计算色块的位置
                var box_left = mouse_left – 100;
                var box_top = mouse_top – 100;
                // 判断是否超出
                if (box_left < 0) {
                    box_left = 0;
                }
                if (box_left > 200) {
                    box_left = 200;
                }
                if (box_top < 0) {
                    box_top = 0;
                }
                if (box_top > 200) {
                    box_top = 200;
                }
                // 让色块移动
                box.style.left = box_left + ‘px’;
                box.style.top = box_top + ‘px’;
                //计算右侧图片位置
                var rpic_left = box_left * -2;
                var rpic_top = box_top * -2;
                // 让右侧移动
                rpic.style.left = rpic_left + ‘px’;
                rpic.style.top = rpic_top + ‘px’;
            }
            //给左侧加鼠标移入事件
            cover.onmouseover = function () {
                // 让左侧色块和右侧隐藏
                box.style.display = ‘block’;
                right.style.display = ‘block’;
            }
            // 给左侧加鼠标移出事件
            cover.onmouseout = function () {
                // 让左侧色块和右侧隐藏
                box.style.display = ‘none’;
                right.style.display = ‘none’;
            }
        }
    </script>
</head>
<body>
    <div id=”left”>
        <div id=”box”></div>
        <div id=”cover”></div>
    </div>
    <div id=”right”>
        <img src=”https://www.rokub.com/wp-content/uploads/2018/04/8fa34e18-2ba1-11e8-978e-8c859074c15d-520×245.png” id=”rpic”>
    </div>
</body>
</html>

大概的思路， 大家看一下，然后再看一看上面的代码

  1. 首先先分出两个窗口，一个用来放值原图，一个用来放置放大的图片。 一定要把窗口的宽高设置好(重要！)
  2. 要准备两张图片，原图和放大的图片。
    3.图片放值好后，给原图窗口加鼠标移动事件
    4.获得事件对象，计算色块的位置，判断是否超出，超出让小色块固定
    5.让色块跟着鼠标移动移动
    6.计算右侧图片位置，让右侧移动
    7.给左侧加鼠标移入事件，让左侧色块和右侧显示
    8.给左侧加鼠标移出事件，让左侧色块和右侧隐藏
    一个大坑，这时候你会移动色块时发现，卡顿，色块乱跑

解决办法：给原图加一个盖子，让鼠标在盖子上移动，就可以完美解决啦！代码如下

<div id=”left”>
<div id=”box”></div> <!– box 放置原图图片 –>
<div id=”cover”></div> <!– cover 放置原图图片的盖子 –>
</div>

前端界面开发模板下载 前端开发资源下载 前端开发中下载文件

赞(0)
前端开发者 » 前端JS电商放大镜效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论