0. 前言
最近项目有点紧，在赶着做项目，时间不是太充裕，最近一段时间没怎么写文章，写文章的时间越来越少，但我会在有空的时候坚持做分享，今天就写一篇我在我的项目用到的，比较好玩的东西，就是模仿锤子官网首页图片的互动效果，手机是看不出来的，只有在电脑上才能看出来啊。
0.jpg
1. 前期准备
实现这种效果，要对c3动画有一定的了解，我在先头的文章中有写过，在这里就给你一个链接，http://www.jianshu.com/p/c4c7346e083b如果你对c3动画了解，就不需要在看了，接下来就进入正文。。。
2. 实现原理解析
- 使用CSS3的transform-style: preserve-3d构建一个3D透视空间。
- 获取鼠标X，Y轴线性运动变量。
- 为了使鼠标左右移动图片产生左右偏转，得把鼠标运动到banner图中间点为“0,0”，这样的话往左为负，往右为正。
- 把变量赋值给CSS3的rotateX,rotateY。
3. 代码实现
首先，有句话说的好“工欲善其事必先利其器”，我们先把结构和样式设置好，
HTML结构
<div id="box">
<div id="picBox">
</div>
</div>
结构没多东西，一看就懂
CSS样式
html,body{
padding: 0;
margin: 0;
background: #f3f3f3;
}
#box{
width: 100%;
height: 400px;
perspective: 1000px;
padding: 100px 0;}
#picBox{
width: 800px;
height: 400px;
margin: 0 auto;
transform-style: preserve-3d;
cursor: pointer;
transform: rotateX(0deg) rotateY(0deg);
}
#img{
transition: all .3s linear;
transform: rotate(0deg);
border-radius: 10px;
}
css样式就不做过多的解释了。。。
JS代码
picBox.addEventListener('mousemove', rotate, false);
picBox.addEventListener('mouseout', outBox, false);
function rotate(e){
var baseX = e.pageX - this.offsetWidth/2 - this.offsetLeft,
baseY = e.pageY - this.offsetHeight/2 - this.offsetTop;
img.style.transform = 'rotateX(' + baseY/(-40) + 'deg) rotateY(' + baseX/80 + 'deg)';
}
function outBox(){
img.style.transform = 'rotateX(0deg) rotateY(0deg)';
}
在这里就简单的说一下，这几行代码吧，一开始我们给图片外层的div添加两个事件监听，当移动和移出的时候触发rotate和outBox函数，e.pageX是鼠标的X轴，this.offsetWidth/2是本身宽度的一半，this.offsetLeft距离它上一层（父级）距离左边框的距离，e.pageY是鼠标的Y轴，this.offsetHeight/2是本身高度的一半，this.offsetTop距离它上一层（父级）距离上边框的距离，现在在看那两行代码是不是就很清楚了！！！
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="./bitbug_favicon.ico" />
<title>高仿锤子官网首页图片交互效果</title>
<style>
html,body{
padding: 0;
margin: 0;
background: #f3f3f3;
}
#box{
width: 100%;
height: 400px;
perspective: 1000px;
padding: 100px 0;}
#picBox{
width: 800px;
height: 400px;
margin: 0 auto;
transform-style: preserve-3d;
cursor: pointer;
transform: rotateX(0deg) rotateY(0deg);
}
#img{
transition: all .3s linear;
transform: rotate(0deg);
border-radius: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="picBox">
</div>
</div>
<script>
picBox.addEventListener('mousemove', rotate, false);
picBox.addEventListener('mouseout', outBox, false);
function rotate(e){
var baseX = e.pageX - this.offsetWidth/2 - this.offsetLeft,
baseY = e.pageY - this.offsetHeight/2 - this.offsetTop;
console.log(this.offsetLeft)
img.style.transform = 'rotateX(' + baseY/(-40) + 'deg) rotateY(' + baseX/80 + 'deg)';
}
function outBox(){
img.style.transform = 'rotateX(0deg) rotateY(0deg)';
}
</script>
</body>
</html>
4. react实现效果
最近写代码都是在用react，所以就在react中怎么用也分享一下吧！！！简单，咱们利用react中提供的API，用ref绑定DOM直接操作它，跟咱们上一个demo道理是一样的，如果你对react不是太了解，那你就看看我以前写的react的文章，如果你是大神请忽略啊！！！
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React learning</title>
</head>
<body>
<div id = "app">
</div>
<script type="text/javascript" src = "index.js">
</script>
</body>
</html>
index.less
html,body{
padding: 0;
margin: 0;
background: #f3f3f3;
}
.box{
width: 100%;
height: 400px;
padding: 100px 0;
perspective: 1000px;
.picBox{
width: 800px;
height: 400px;
margin: 0 auto;
transform-style: preserve-3d;
cursor: pointer;
transform: rotateX(0deg) rotateY(0deg);
.img{
width: 800px;
height: 400px;
transition: all .3s linear;
transform: rotate(0deg);
border-radius: 10px;
}
}
}
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';//引入less文件
import src from './imgs/1.jpg';//引入图片
export default class App extends React.Component{
moveFunc = () => {
//获取dom节点
let imgs = this.refs.imgs,
picBox = this.refs.picBox;
let baseX = e.pageX - picBox.offsetWidth/2 - picBox.offsetLeft,
baseY = e.pageY - picBox.offsetHeight/2 - picBox.offsetTop;
console.log('-------',baseX, baseY,'--------')
imgs.style.transform = 'rotateX(' + baseY/(-40) + 'deg) rotateY(' + baseX/80 + 'deg)';
}
outFunc = () => {
//获取dom节点
let imgs = this.refs.imgs;
imgs.style.transform = 'rotateX(0deg) rotateY(0deg)';
}
render() {
return (
<div className="box">
<div ref="picBox" className="picBox" onMouseMove={this.moveFunc.bind(this)} onMouseOut={this.outFunc.bind(this)}>
<img ref="imgs" className="img" src={src} width="800" height="400"/>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
webpack.config.js
配置文件
var config = {
devtool: 'eval-source-map',
entry: './App.jsx',
output: {
path: __dirname + "",
filename: 'index.js'
},
module: {
loaders: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react','stage-0']
}
},
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader'
}
]
}
}
module.exports = config;
package.json
依赖文件
{
"name": "runoob-react-test",
"version": "1.0.0",
"description": "cllgeek",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^2.9.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.28.0",
"jsx-loader": "^0.13.2",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"style-loader": "^0.16.1"
},
"devDependencies": {
"babel-plugin-import": "^1.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-stage-0": "^6.24.1",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"react-transform-hmr": "^1.0.4",
"url-loader": "^0.5.8",
"webpack": "^2.3.3"
}
}
因为我在我先前的文章就有提到过这些是怎么配置的，怎么用，如果你比较勤奋，就翻一下我写的吧！！！
5. 最终实现效果
这俩种方法，在原声中，和react中都能实现，那么废话也不多说，看效果吧！！！
GIF.gif
结束语
最近更新文章的速度有点慢，不是太多，毕竟白天都在工作，时间有点紧。希望我写的文章能得到你的喜欢。。。点赞分享吧！！！
