该博客展示了如何使用HTML、CSS和JavaScript创建一个跟随鼠标移动的放大镜效果。通过监听鼠标移动事件，动态调整放大镜的位置，并在canvas上绘制放大部分的图片，实现了图片细节的实时预览功能。代码示例中，图片大小为720px * 478px，内框尺寸为200px * 200px。
标题图片跟随移动的放大镜效果
根据自己的需求适当的改动效果—用到的图片的大小为（720px,478px;）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box{
position:relative;
width:478px;
height:720px;
/* border:1px solid red; */
margin:0 auto;
}
#container{
position:absolute;
top:0px;
width:200px;
height:200px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="box">
<img src="./up.jpg" alt="" id="img1" />
<div id="container">
<canvas id="canvas" width="200" height="200"> </canvas>
</div>
</div>
<script>
window.onload = function () {
var box=document.getElementById('box')
var img1=document.getElementById('img1')
var cont=document.getElementById('container')
var canvas=document.getElementById('canvas')
var ctx=canvas.getContext("2d");
var time=null
box.addEventListener('mousemove',function(event){
if(time) time=null
// time=setTimeout(()=>{
// ---鼠标移动的距离
var cx=event.clientX-box.offsetLeft-cont.offsetWidth/2
var cy=event.clientY-box.offsetTop-cont.offsetHeight/2
// console.log(cx,cy);
// ---内框最大的移动距离
var max=box.offsetWidth-cont.offsetWidth
var may=box.offsetHeight-cont.offsetHeight
if(cx<=0){
cx=0
}
if(cx>=max){
cx=max
}
if(cy<=0){
cy=0
}
if(cy>=may){
cy=may
}
cont.style.top=cy+'px'
cont.style.left=cx+'px'
console.log(cx,cy);
var dx
var dy
if(cx<=0){
dx=0
}else{
dx=cx+50
}
if(cy<=0){
dy=0
}else{
dy=cy+50
}
ctx.drawImage(img1,dx,dy,100,100,0,0,200,200);
// },80)
})
}
</script>
</body>
</html>
3480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
