最近少し遅れて申し訳ありませんが、今日は非常に興味深いボタンを持ってきました。マーベリックスがマウスの動きを追跡するケースです。
HTML
<div class="img"></div>まさにそのような箱
そしてCSS部分
*{
margin: 0;
padding: 0;
}
body{
background: rgb(240,230,240);
}
.img{
width: 50px;
height: 50px;
position: absolute;
background-image: url(./images/0112.gif);
background-size: cover;
}次に、JS 部分
最初のステップは、アニメーション効果用の img 要素を取得する必要があるため、各方向の小さな画像の位置を定義しましょう。コメントは以下に書かれています。見てください。その後、マウスを実行する必要があります。移動イベント、では、なぜこの部分を 2 で割って、画像が中央にあるときに動かないようにします。XY 軸を取得した後、次の式を設定する必要があります。
マウスが動くたびにふくらはぎも一緒に動かします。次にマウスの位置を定義します。それから判断します。X 軸より大きい場合は反転する必要があります。それ以外の場合は反転する必要はありません。以下は、私たちが設定した1時間の画像反転コードです
let img=document.querySelector('.img')
//定义小图片旋转角度
let deg=0
//定义小图片位于网页左侧位置
let imgx=0
//定义小图片位于网页顶侧位置
let imgy=0
//定义小图片位置
let imgl=0
//定义小图片y轴位置
let imgt=0
//定义小图片翻转角度
let y=0
//定义一个定时器
let index =0
window.addEventListener('mousemove', function(xyz){
//获取网页左侧位于图片位置
imgx=xyz.x - img.offsetLeft - img.clientWidth /2
//多去网页顶部距离图片位置
imgy=xyz.y - img.offsetTop - img.clientHeight /2
//套入公司 定义图片旋转角度·
deg=360*Math.atan(imgy/imgx)/(2*Math.PI)
//每当鼠标移动的时候重置
index=0
//定义当前鼠标位置
let x = event.clientX
//当前鼠标x轴大于图片时候，牛牛要对这鼠标，所有需要图片翻转一下，否则就不需要翻转
if(img.offsetLeft<x){
y=180
}else{
y=0
}
})
setInterval(()=>{
//设置小图片旋转和翻转
img.style.transform ="rotateZ("+deg+"deg) rotateY("+y+"deg)"
index++
//设置小图片位置速度，判断小图片随着位置停止移动
if(index<50){
imgl+=imgx/50
imgt+=imgy/50
}
img.style.left = imgl+"px"
img.style.top = imgt+"px"
})次に、皆さんがコピーできるように、ソースコードを直接置きます
<!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>
*{
margin: 0;
padding: 0;
}
body{
background: rgb(240,230,240);
}
.img{
width: 50px;
height: 50px;
position: absolute;
background-image: url(./images/0112.gif);
background-size: cover;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
<script>
let img=document.querySelector('.img')
//定义小图片旋转角度
let deg=0
//定义小图片位于网页左侧位置
let imgx=0
//定义小图片位于网页顶侧位置
let imgy=0
//定义小图片位置
let imgl=0
//定义小图片y轴位置
let imgt=0
//定义小图片翻转角度
let y=0
//定义一个定时器
let index =0
window.addEventListener('mousemove', function(xyz){
//获取网页左侧位于图片位置
imgx=xyz.x - img.offsetLeft - img.clientWidth /2
//多去网页顶部距离图片位置
imgy=xyz.y - img.offsetTop - img.clientHeight /2
//套入公司 定义图片旋转角度·
deg=360*Math.atan(imgy/imgx)/(2*Math.PI)
//每当鼠标移动的时候重置
index=0
//定义当前鼠标位置
let x = event.clientX
//当前鼠标x轴大于图片时候，牛牛要对这鼠标，所有需要图片翻转一下，否则就不需要翻转
if(img.offsetLeft<x){
y=180
}else{
y=0
}
})
setInterval(()=>{
//设置小图片旋转和翻转
img.style.transform ="rotateZ("+deg+"deg) rotateY("+y+"deg)"
index++
//设置小图片位置速度，判断小图片随着位置停止移动
if(index<50){
imgl+=imgx/50
imgt+=imgy/50
}
img.style.left = imgl+"px"
img.style.top = imgt+"px"
})
</script>
</html>素材は表紙にあります、よろしくお願いします