高仿锤子官网首页图片交互效果

作者: 旧丶时候 | 来源:发表于2017-05-11 09:56 被阅读1261次

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">
            ![](1.jpg)
        </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">
            ![](1.jpg)
        </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

结束语

最近更新文章的速度有点慢，不是太多，毕竟白天都在工作，时间有点紧。希望我写的文章能得到你的喜欢。。。点赞分享吧！！！

网友评论

品布尔:用了 JS 那段代码，发现垂直方向的中心不在图片中心。不懂 JS ，改了半天没改对 QUQ
旧丶时候:@品布尔这个好长时间了忘了😂
燕氏姓名学:真得厉害，原生的为什么会出现开始起作用后来就不起作用了
旧丶时候:@燕氏姓名学我没遇到，那还是我写的不是太好
旧丶时候:坐

本文标题：高仿锤子官网首页图片交互效果

本文链接：https://www.haomeiwen.com/subject/ccqdzttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！