挺久没写博客了, 最近学js模拟做了锤子手机的官方网站 分享下他那个主页的海报轮播的倾斜效果是怎么做的;
锤子科技商城官网;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#box{
width: 600px;
margin:100px auto;
/*perspective 是css透视属性 这个效果实现的关键 而且要加在父级*/
perspective:800px;
}
#banner{
width: 600px;
height: 400px;
background:red;
}
</style>
</head>
<body>
<div id="box">
<div id='banner'></div>
</div>
</body>
<script>
var box=document.getElementById('box');
var banner=document.getElementById('banner');
box.onmousemove=function(e){
e=e||event;
//获取banner的X轴的中心 和 y轴的中心
var centerX=banner.offsetLeft+banner.offsetWidth/2;
var centerY=banner.offsetTop+banner.offsetHeight/2;
//获取鼠标到中心的位置距离
//e.page指鼠标到banner到边缘的位置
var deltaX=e.pageX-centerX;
var deltaY=e.pageY-centerY;
//获取鼠标到中心距离与中心长度的比率 距离中心越远比越大 倾斜角度越大
var percentageX=deltaX/centerX;
var percentageY=deltaY/centerY;
//常数
var deg=10;
//个人觉得X轴旋转用Y轴的比率 y轴的旋转倾斜角度用X轴的比率 这样可用无视正负 都是有向下倾斜的感觉
banner.style.transform="rotateX("+percentageY*-deg+"deg)"+"rotateY("+percentageX*deg+"deg)";
}
banner.onmouseleave=function(){
banner.style.transform=''
}
</script>
</html>