JsとCSSでハンマー携帯サイトのポスターを実現移動に追随して傾きます
6184 ワード
長い間ブログを書いていませんが、最近jsシミュレーションを学んでハンマー携帯電話の公式サイトを作って、彼のホームページのポスターの輪番放送の傾斜効果はどのようにしたのかを共有しました.ハンマー科学技術ショッピングモールの公式サイト;
<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>