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

前端开发 纯JS制作放大镜

2018-07-12 分类：JavaScript 阅读(834) 评论(0)

秦皇岛前端开发javaee资料|前端开发与javascript|web前端开发技术——html_css_javascript

放大镜的关键原理：鼠标在小图片移动时，通过捕捉鼠标在小图片上面的位置，来定位大图片相应的位置

所用到技术要点：

1.事件：
onmouseover：会在鼠标指针移动到指定的对象上时发生
onmouseout：会在鼠标指针移出指定的对象时发生
onmousemove：会在鼠标指针移动时发生

2.定位属性：
offsetLeft offsetTop offsetWidth offsetHeight event.clientX event.clientY

这个实例可以加深初学者对这些事件跟属性的了解。

html 代码

<!doctype html>
<head>
    <meta charset=”UTF-8″>
    <title>目前app前端开发的语言:js放大镜</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>

vue.js 前端开发 pdf|前端开发用js数组吗|前端开发工资为什么高

赞(0)
前端开发者 » 前端开发 纯JS制作放大镜
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论