想让老师指点我一下锤子官网的那个轮播图大体思路

来源:6-7 首页 - 幻灯片组件(2)

子羊学长

2017-09-26

锤子官网那个轮播图是我见过最炫酷的轮播方案,一直想实现但是水平有限,找不到思路。希望老师能指点一二。

写回答

2回答

达文西H

2017-09-26

我感觉是通过offsetX/offsetY来获取鼠标在轮播图中的坐标位置,再根据这个坐标值进行css3中的3D转换

2
0

fishenal

2017-09-27

你是说移动过去跟个平面似的那个对吧。看了一下锤子官网是用angular.js做的,这个特效主要是基于.banner-3d 这个类,用到的css3的属性 应该是 perspective (https://developer.mozilla.org/en-US/docs/Web/CSS/perspective) 配合过渡transition, 重点应该是监听了mouseover事件,根据鼠标坐标更改了perspective或者 transform?的属性,这个具体要研究一下文档,实践一下 

1
1
子羊学长
谢谢老师!我先去研究研究。
2017-09-27
共1条回复

最容易上手的Vue2.0入门实战教程

快速入门Vue2.0,组件化开发一个数字产品电商平台

3966 学习 · 999 问题

查看课程