JS放大镜案例

最新推荐文章于 2024-01-29 23:55:28 发布

Driven_Pluto

最新推荐文章于 2024-01-29 23:55:28 发布

阅读量45

点赞数

分类专栏： Java-web

本文链接：https://blog.csdn.net/qq_42295268/article/details/113605064

版权

Java-web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,img,ul,li{margin:0px;padding:0px;}
        #did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}
    </style>
</head>
<body>
<h1>JavaScript语言实例--图片的放大镜效果</h1>
<br/><br/><br/>
<img id="mid" src="./img/33.jpg" width="384" height="240"/>
<div id="did">
    <img src="./img/33.jpg"/>
</div>
</body>
<script>
    var mid = document.getElementById("mid");
    var did = document.getElementById("did");

    mid.onmouseover = function () {
        did.style.top = this.offsetTop+"px";
        did.style.left = this.offsetLeft+this.offsetWidth+10+"px";
        did.style.display = "block";
    }
    mid.onmouseout = function () {
        did.style.display = "none";
    }
    //添加鼠标移动事件
    mid.onmousemove = function (ent) {
        var event = ent || window.event;
        //获取鼠标在图片上的位置
        var x = event.clientX - this.offsetLeft;
        var y = event.clientY - this.offsetTop;
        //放大镜
        did.scrollTop = y*5-150;
        did.scrollLeft = x*5-150;

    }
</script>
</html>

在这里插入图片描述

Driven_Pluto

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS放大镜案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div,img,ul,li{margin:0px;padding:0px;} #did{width:300px;height:300px;overflow:hidden;display:n
复制链接

扫一扫