这几天拖延了一段时间不太好意思，今天还是带来一个很有意思的按钮，小牛跟着我的鼠标移动这个案例啊
HTML
就这么一个盒子
然后是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{
//设置小图片旋转和翻转
img.style.transform ="rotateZ("+deg+"deg) rotateY("+y+"deg)"
index++
//设置小图片位置速度，判断小图片随着位置停止移动
if(index接下来为了大家好复制，我直接放源码了
Document
*{
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;
}
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{
//设置小图片旋转和翻转
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"
})
素材在封面噢，谢谢大家支持了
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
Android Build System Basics of the Android Build system were described at (Down as of 9/2011): http://source.android.com/porting…
