要实现在页面中鼠标点到哪里图片就在哪里显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img {
width: 60px;
height: 60px;
display: block
}
</style>
</head>
<body>
<img src="img/img.jpg" alt="" id="img">
<script>
var headerX=0;
var headerY=0;
var targerY=0;
var targerX=0;
//创建点击页面获得坐标的事件
window.onclick=function(event){
//1.获取点击时的坐标
var clientX=event.clientX;
var clientY=event.clientY;
//2.计算出如何移动到某点
var moverY=clientY-(img.scrollTop+img.scrollHeight/2);
var moverX=clientX-(img.scrollTop+img.scrollWidth/2);
//当点击时给目标赋值
targerY=moverY;
targerX=moverX;
//3.实现缓慢动作
setInterval(function(){
headerX=headerX+(targerX-headerX)/10;
headerY=headerY+(targerY-headerY)/10;
var trans="translate3d("+headerX+"px,"+headerY+"px,"+0+")"
img.style.transform=trans;
},20)
}
</script>
</body>
</html>
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
