JavaScript写放大镜效果

最新推荐文章于 2024-05-21 14:15:14 发布

忍者1

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量79

点赞数

分类专栏：前端文章标签： javascript

原文链接：http://www.mark-to-win.com/tutorial/50692.html

版权

前端专栏收录该内容

101 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #middle {
            width: 400px;
            height: 400px;
            position: absolute;
            top : 50px;
            left : 100px;
            border: 1px solid;
        }
 
        #middle img {
            width: 400px;
            height: 400px;
        }
 
        #len {
            width: 200px;
            height: 200px;
            background: #f00;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
            display: none;
        }
 
        #big {
            width: 400px;
            height: 400px;
            position: absolute;
            top : 50px;
            left : 520px;
            border:1px solid;
            overflow: hidden;
            display: none;
        }
        #big img {
            width: 800px;
            height: 800px;
            position: absolute;
            top : 0;
            left : 0;
        }
    </style>
</head>
<body>
    <div id="middle">
        <img src="images/middle.jpg">
        <div id="len"></div>
    </div>
 
    <div id="big">
        <img src="images/big.jpg" id="big_img">
    </div>
 
    <script src="js/tools.js"></script>
    <script>
        /* 鼠标移入/移出 div#middle */
        $("#middle").onmouseenter = function(){
            $("#len").style.display = "block";
            $("#big").style.display = "block";
        }
        $("#middle").onmouseleave = function(){
            $("#len").style.display = "none";
            $("#big").style.display = "none";
        }
 
        // 求 div#middle 元素在文档中定位
        var middleOffset = offset($("#middle"));
 
        /* 鼠标在 div#middle 上移动 */
        $("#middle").onmousemove = function(e){
            // 镜头坐标
            var _top = e.pageY - middleOffset.top - 100,
                _left = e.pageX - middleOffset.left - 100;
            // 判断镜头是否在div#middle中图范围内移动
            if (_top < 0)
                _top = 0;
            else if (_top > 200)
                _top = 200;
            if (_left < 0)
                _left = 0;
            else if (_left > 200)
                _left = 200;

忍者1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript写放大镜效果

Document <div id="big"> <img src="images/big.jpg" id="big_img"></div><script src="js/tools.js"></script><script> /* 鼠标移入/移出 div#middle */ $("#middle").onmouse...
复制链接

扫一扫