javascript 图片放大镜

最新推荐文章于 2022-02-23 15:52:57 发布

Sunny_can

最新推荐文章于 2022-02-23 15:52:57 发布

阅读量347

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/can_Sunshine/article/details/52662459

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片放大镜</title>
<style>
#d1{position: relative;cursor: pointer;width: 349px;height: 220px;float: left;}
#img1{position: relative;}
span{display:none;width:50px;height:50px;background: yellow;opacity:.3;position: absolute;top:0;left:0;}
#big{width:400px;height:400px;overflow: hidden;float: left;position: relative;display: none;}
#img2{position: absolute;}
</style>
</head>
<body>
<div id="d1">
<img src="img/78.jpg" alt="" id="img1" />
<span id="span1"></span>
</div>
<div id="big">
<img src="img/78.jpg" alt="" id="img2" width="1745px" height="1100px"/>
</div>

var d1=document.getElementById("d1");
var big=document.getElementById("big");
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");

var span = document.getElementById("span1");

img1.onmousemove = function () {

Sunny_can

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 图片放大镜

图片放大镜 #d1{position: relative;cursor: pointer;width: 349px;height: 220px;float: left;} #img1{position: relative;} span{display:none;width:50px;height:50px;background: y
复制链接

扫一扫