javascript 实现图片放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片放大镜效果</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        #demo{
            width: 350px;
            margin: 20px auto;
            border: 1px solid #666;
            clear: both;
            position: relative;
            height: 350px;
        }
        img{
            float: left;
        }
        #tep{
            width: 250px;
            height: 250px;
            border: 1px solid #666;
            position: absolute;
            top: -1px;
            left: 362px;
            overflow: hidden;
            display: none;
        }
        #bar{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #fff;
            opacity: 0.4;
            filter: alpha(opacity=40);
            display: none;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <div id="demo">
        <img src="img/small.jpg">
        <span id="bar"> 
        </span>
        <div id="tep">
            <img src="img/big.jpg">
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function (){
            var demo = document.getElementById("demo");
            var bar = document.getElementById("bar");
            var tepImg = document.getElementById("tep").getElementsByTagName("img")[0];
            demo.onmouseover = bar.onmousemove = function (event){
                // 移入的时候 显示出来 并判断 bar 的位置
                bar.style.display = tep.style.display = "block";
                barPosition(event);
            }
            // 判断bar的位置
            function barPosition(event){
                var event = event || window.event;
                // 位置判断 画图就懂了
                bar.style.left = event.clientX - demo.offsetLeft - bar.offsetWidth/2 + "px";
                bar.style.top = event.clientY - demo.offsetTop - bar.offsetHeight/2 + "px";
                // 超过边界
                if (bar.offsetLeft < 0 ) {
                    bar.style.left = "0px"
                }
                if (bar.offsetLeft + bar.offsetWidth > 350) {
                    bar.style.left = 350 - bar.offsetWidth + "px";
                }
                if (bar.offsetTop < 0 ) {
                    bar.style.top = "0px"
                }
                if (bar.offsetTop + bar.offsetHeight > 350) {
                    bar.style.top = 350 - bar.offsetHeight + "px";
                }
                // 通过 bar的位置 在判断 tep img的位置
                tepImgPosition(bar.offsetLeft,bar.offsetTop);
            }
            function tepImgPosition (left,top){
                // 乘以他们的一个比值
                tepImg.style.marginLeft = - left * ((800-250)/(350-100)) + "px";
                tepImg.style.marginTop = - top * ((800-250)/(350-100))+ "px";
            }
            bar.onmouseout = demo.onmouseout = tepImg.onmousemove = function (){
                bar.style.display = tep.style.display = "none";
                return false;
            }
        }
    </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容