摘要:关于旋转木马效果实用例子一个实际应用在优酷的频道页。将对的数据操作转化为数组,数组元素存储各项的数据宽高绝对定位偏移值透明度以及层叠参数,在模板处遍历实际项目的数组,其样式则通过索引获取对数组的元素数据。
同事拿到个设计稿,是旋转木马的轮播效果,于是网上找了一下,发现了jquery实现的效果,一有空就看看源码,研究其实现原理,想着用vue的数据驱动方式来实现一个,但这个效果跟以往做的demo效果不同,每次思考实现都被卡住了。拖延了好些日子,后来脑子一转,居然想到方案了,于是动手实现了下。
关于旋转木马效果实用例子:一个实际应用在优酷的频道页。
首先分析一下jquery的实现效果,其实是将轮播项的dom进行左右分组,并设定好每个dom的宽高、层叠参数、透明度以及位置偏移,然后通过jquery的动画api,对dom组进行一个数据切换(复制下一个dom的数据)。比如现在有ABC三个,B在中间,当右往左切换时,B获取C的数据,而C拿A的数据,而A替换B的数据,变成BCA.
关于计算插件接受指定的几个数据:整体宽高,主项宽高(中间最大),其他项依次缩小的比例。
关于位置,如图:
主项应该是居中的,所以其位置偏移(绝对定位)左边相对于父元素来说,应该是整体宽度和自身宽度之差的一半。而两边的其他项,直接相隔则按数目等分剩余空间。比如假设父元素宽度800px,主项宽度400px,左边剩余空间应该宽为(800-400)/2=200px,而假设左边有两项,则二者直接等分展示自身部分为200/2=100px;这个数值就是我们要考虑的绝对定位left值,同理可得右边部分的left值,至于项目的居中绝对定位,也是类似的道理,更加简单。
其次,考虑的是以中间为主项,往两边的项应该层叠参数(z-index)越靠中间,值越大,透明度越往两边值越小。具体代码逻辑可从这里找到。
vue实现vue的理念是数据驱动,所以要把jquery插件那套实现做一下转化。同样,也是接受几个静态数据:整体宽高、中间项宽高、缩小比例。
将jquery对dom的数据操作转化为数组store,数组元素存储各项dom的数据(宽高、绝对定位偏移值、透明度以及层叠参数),在模板处遍历实际项目的数组,其样式则通过索引获取对store数组的元素数据。
切换数据通过对store进行出队、入队或反向出队和入队操作以达到切换逻辑;再通过样式设定transition来设置动画效果即可。
.item{ transition: all .8s ease; }
对于数据的初始化,代码如下:
//store数组 var items = []; //拷贝物理数据 var rlist = copyArr(this.list); //获取中间数组元素索引 var level = Math.floor(this.list.length/2); //如果数据是偶数则拷贝多一个数据. if(this.list.length%2==0){ var center = this.list[0]; rlist.push(Object.assign({},center)); } //左边部分 var lefts = rlist.slice(0,level); //右边部分 var rights = rlist.slice(level); var that = this; //两边剩余空间(单边) var leftGap = (this.allWidth - this.curWidth)/2; //等分剩余空间,即间隙 var gap = leftGap/level; lefts.forEach(function(e,i){ //遍历左边部分 var obj = {}; //从左往右,其left值是gap倍数增长 obj.left = i*gap; //层叠参数逐级增1 obj.zIndex = i+1; //透明度则简单做逐级增大 obj.opacity = 1/(level+1-i); //宽高则按距离中间项的个数来选择缩放 obj.width = that.curWidth*Math.pow(that.scale,level-i); obj.height = that.curHeight*Math.pow(that.scale,level-i); //底部距离取最大高与当前项高差的一半 obj.bottom = (that.allHeight-obj.height)/2; items.push(obj); }); //遍历右边部分,包含中间项 rights.forEach(function(e,i){ var obj = {}; obj.width = that.curWidth*Math.pow(that.scale,i); obj.height = that.curHeight*Math.pow(that.scale,i); //偏移值可以反向思考,通过全宽减去距离右边偏移以及自身宽度 obj.left = that.allWidth - (level-i)*gap - obj.width; obj.zIndex = level-i+1; obj.opacity = 1/(i+1); obj.bottom = (that.allHeight-obj.height)/2; items.push(obj); }); return { items:items, rlist:rlist, timer:null, dir:"right" }
加上定时器和方向选择,效果就出来了,如下:
https://jsfiddle.net/dont27/L...
访问不了可以看runjs.
刚开始一直思维绕不过去,一直无从下手,然而当抓到突破点的时候,其实写出来,发现挺简单的!
不过在偶数项处理方面,我只是简单做一下拷贝多一份的处理,比较粗暴!
PS: 有感兴趣有想法的,欢迎留言评论,欢迎指教~
原文放在自己的博客上: http://shellphon.wang/githubl...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111850.html
摘要:关于旋转木马效果实用例子一个实际应用在优酷的频道页。将对的数据操作转化为数组,数组元素存储各项的数据宽高绝对定位偏移值透明度以及层叠参数,在模板处遍历实际项目的数组,其样式则通过索引获取对数组的元素数据。 同事拿到个设计稿,是旋转木马的轮播效果,于是网上找了一下,发现了jquery实现的效果,一有空就看看源码,研究其实现原理,想着用vue的数据驱动方式来实现一个,但这个效果跟以往做的d...
摘要:说明此版本轮播图为仿照网易云音乐播放器上首页的轮播。网易的轮播特殊的地方就在于,如果你滑动不相邻的两张图片,其过渡效果并不是滑动过渡,而是一个跳出过渡,此方面原理与最开始设计轮播排版时候有极大关联。 说明: 此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。 网易的轮播特殊的地方就在于,如果你滑动不相邻的两张图片,其过渡效果并不是滑动过渡,而是一个跳出过渡,此方面原理与最开始设计轮播...
摘要:说明此版本轮播图为仿照网易云音乐播放器上首页的轮播。网易的轮播特殊的地方就在于,如果你滑动不相邻的两张图片,其过渡效果并不是滑动过渡,而是一个跳出过渡,此方面原理与最开始设计轮播排版时候有极大关联。 说明: 此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。 网易的轮播特殊的地方就在于,如果你滑动不相邻的两张图片,其过渡效果并不是滑动过渡,而是一个跳出过渡,此方面原理与最开始设计轮播...
摘要:说明此版本轮播图为仿照网易云音乐播放器上首页的轮播。网易的轮播特殊的地方就在于,如果你滑动不相邻的两张图片,其过渡效果并不是滑动过渡,而是一个跳出过渡,此方面原理与最开始设计轮播排版时候有极大关联。 说明: 此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。 网易的轮播特殊的地方就在于,如果你滑动不相邻的两张图片,其过渡效果并不是滑动过渡,而是一个跳出过渡,此方面原理与最开始设计轮播...
阅读 1692·2021-11-22 15:33
阅读 1954·2021-10-08 10:04
阅读 3521·2021-08-27 13:12
阅读 3367·2019-08-30 13:06
阅读 1440·2019-08-29 16:43
阅读 1362·2019-08-29 16:40
阅读 694·2019-08-29 16:15
阅读 2726·2019-08-29 14:13