开发者社区> 航空母舰> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

SlideView 图片滑动(扩展/收缩)展示效果

简介:
+关注继续查看

滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果。
这个其实就是以前写的图片滑动展示效果 的改进版,那是我第一篇比较受关注的文章,是时候整理一下了。
有如下特色:
1,有四种方向模式选择;
2,结合tween算法实现多种滑动效果;
3,能自动根据滑动元素计算展示尺寸;
4,也可自定义展示或收缩尺寸;
5,可扩展自动切换功能;
6,可扩展滑动提示功能。
兼容:ie6/7/8, firefox 3.6.8, opera 10.51, safari 4.0.5, chrome 5.0


程序说明

【基本原理】

通过设置滑动元素的位置坐标(left/right/top/bottom),实现鼠标进入的目标元素滑动展示,其他元素滑动收缩的效果。
难点是如何控制多个滑动元素同时进行不同的滑动,这里关键就在于把整体滑动分解成各个滑动元素进行各自的滑动。
方法是给各个滑动元素设置目标值,然后各自向自己的目标值滑动,当全部都到达目标值就完成了。


【容器设置】

在_initContainer方法中进行容器设置,由于后面滑动参数的计算要用到容器,所以要先设置容器。
先设置容器样式,要实现滑动需要设置容器相对或绝对定位,并且设置overflow为"hidden"来固定容器大小,而滑动元素也要设置绝对定位。

鼠标移出容器时会触发_LEAVE移出函数:

Java代码  收藏代码
  1. $$E.addEvent( container, "mouseleave"this._LEAVE );  
 其中_LEAVE函数是这样的:
Java代码  收藏代码
  1. var CLOSE = $$F.bind( this.close, this );  
  2. this._LEAVE = $$F.bind( function(){  
  3.     clearTimeout(this._timerDelay);  
  4.     $$CE.fireEvent( this"leave" );  
  5.     if ( this.autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ); }  
  6. }, this );  

当autoClose属性为true时才会延时触发close方法。


【滑动对象】

程序初始化时会根据滑动元素创建滑动对象集合。
先获取滑动元素:
Java代码  收藏代码
  1. var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )  
  2.     : $$A.filter( container.childNodes, function(n) { return n.nodeType == 1; });  

如果没有自定义nodes滑动元素,就从容器获取childNodes作为滑动元素。
还要用nodeType筛选一下,因为ie外的浏览器都会把空格作为childNodes的一部分。

接着用获取的滑动元素生成程序需要的_nodes滑动对象集合:

Java代码  收藏代码
  1. this._nodes = $$A.map( nodes, function(node){ return { "node": node }; });  

滑动对象用"node"属性记录滑动元素。

然后在_initNodes方法中初始化滑动对象。
每个滑动对象都有3个用来计算滑动目标值的属性:defaultTarget默认目标值,max展示尺寸,min收缩尺寸。
如果有自定义max尺寸或min尺寸,会根据自定义的尺寸来计算。
程序会优先按max来计算:
Java代码  收藏代码
  1. max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize );  
  2. min = ( clientSize - max ) / maxIndex;  

其中clientSize是容器的可见区域尺寸,defaultSize是平均分配尺寸。
如果max是小数或1就按百分比计算,再把尺寸限制在defaultSize到clientSize的范围内。
再计算减去max后其他收缩元素的平均尺寸,就可以得到min了。

如果没有自定义max再按自定义min来计算:
Java代码  收藏代码
  1. min = Math.min( min < 1 ? min * clientSize : min, defaultSize );  
  2. max = clientSize - maxIndex * min;  
 同样,如果min是小数就按百分比计算,再做范围限制,然后计算得出max。最后得到自定义尺寸计算函数: 
Java代码  收藏代码
  1. getMax = function(){ return max; };  
  2. getMin = function(){ return min; };  
 如果没有自定义max或min,就根据元素尺寸来计算:
Java代码  收藏代码
  1. getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); };  
  2. getMin = function(o){ return ( clientSize - o.max ) / maxIndex; };  

把元素尺寸作为展示尺寸来计算,同样要做范围限制,然后计算收缩尺寸。

得到尺寸计算函数后,再用_each方法历遍并设置滑动对象:
Java代码  收藏代码
  1. o.current = o.defaultTarget = getDefaultTarget(i);  
  2. o.max = getMax(o); o.min = getMin(o);  

其中current是当前坐标值,在移动计算时作为开始值的。
而defaultTarget是默认目标值,即默认状态时移动的目标值,根据defaultSize和索引得到。

还要设置当鼠标进入滑动元素时触发show展示函数:
Java代码  收藏代码
  1. var node = o.node, SHOW = $$F.bind( this.show, this, i );  
  2. o.SHOW = $$F.bind( function(){  
  3.     clearTimeout(this._timerDelay);  
  4.     this._timerDelay = setTimeout( SHOW, this.delay );  
  5.     $$CE.fireEvent( this"enter", i );  
  6. }, this );  
  7. $$E.addEvent( node, "mouseenter", o.SHOW );  

要在滑动元素的"mouseenter"事件中触发,并传递当前滑动对象的索引,再加上延时设置就可以了。


【滑动展示】

当鼠标进入其中一个滑动元素,就会触发show方法开始展示。

首先执行_setMove方法设置滑动参数,并以索引作为参数。
在_setMove里面主要是设置计算移动值时需要的目标值、开始值和变化值。
先修正索引,错误的索引值会设置为0:
Java代码  收藏代码
  1. this._index = index = index < 0 || index > maxIndex ? 0 : index | 0;  
  再根据索引获取要展示的滑动对象,通过展示对象的min和max得到getTarget目标值函数:
Java代码  收藏代码
  1. var nodeShow = nodes[ index ], min = nodeShow.min, max = nodeShow.max;  
  2. getTarget = function(o, i){ return i <= index ? min * i : min * ( i - 1 ) + max; };   

如果滑动对象就是展示对象或者在展示对象前面,目标值就是min * i,因为第i+1个滑动对象的目标值就是i个min的大小。
否则,目标值就是min * ( i - 1 ) + max,其实就是把展示对象的位置换成max。

然后设置每个滑动对象的参数属性:
Java代码  收藏代码
  1. this._each( function(o, i){  
  2.     o.target = getTarget(o, i);  
  3.     o.begin = o.current;  
  4.     o.change = o.target - o.begin;  
  5. });   

其中target记录目标值,begin通过current得到开始值,目标值和开始值的差就是change改变值。

设置完成后,就执行_easeMove方法开始滑移,在里面重置_time属性为0,再就执行_move程序就正式开始移动了。
首先判断_time是否到达duration持续时间,没有到达的话,就继续移动。
程序设置了一个_tweenMove移动函数,用来设置缓动:
Java代码  收藏代码
  1. this._setPos( function(o) {  
  2.     return this.tween( this._time, o.begin, o.change, this.duration );  
  3. });  

利用tween算法,结合当前时间,开始值,改变值和持续时间,就能得到当前要移动的坐标值。
ps:关于tween缓动可以参考tween算法及缓动效果 。

当_time到达duration说明滑动已经完成,再执行一次_targetMove目标值移动函数:
Java代码  收藏代码
  1. this._setPos( function(o) { return o.target; } );  

直接移动到目标值,可以防止可能出现的计算误差导致移位不准确。


【关闭和重置】

close方法可以关闭展示,即滑动到默认状态,默认在移出容器时就会执行。
默认状态是指全部滑动元素位于defaultTarget默认目标值的状态。
先用_setMove设置移动参数,当_setMove没有索引参数时,就会设置目标值为默认目标值:
Java代码  收藏代码
  1. getTarget = function(o){ return o.defaultTarget; }  

完成参数设置后,再执行_easeMove进行滑动,跟滑动展示类似。

reset方法可以重置展示,重置的意思是不进行滑动而直接移动到目标值。
如果没有索引参数,就会直接执行_defaultMove默认值移动函数:
Java代码  收藏代码
  1. this._setPos( function(o) { return o.defaultTarget; } );  

直接把滑动元素移动到默认状态。
如果有索引参数,就先用_setMove根据索引设置目标值,再执行_targetMove直接移动到目标值。
程序初始化后会执行一次reset,并且以自定义defaultIndex作为参数。
利用defaultIndex可以一开始就展示对应索引的滑动对象。


【方向模式】

程序可以自定义mode方向模式,有四种方向模式:bottom、top、right、left(默认)。
其中right和left是在水平方向滑动,而bottom和top是在垂直方向滑动。
而right和left的区别是定点方向不同,left以左边为定点在右边滑动,right就相反。
具体参考实例就应该明白了,bottom和top的区别也类似。

程序是通过对不同的方向就修改对应方向的坐标样式来实现的。
例如left模式就用"left"样式来做移动效果,top模式就用"top"样式。
初始化程序中设置的_pos属性就是用来记录当前模式要使用的坐标样式的:
Java代码  收藏代码
  1. this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left";  
 然后在_setPos方法中使用_pos指定的坐标样式来设置坐标值:
Java代码  收藏代码
  1. var pos = this._pos;  
  2. this._each( function(o, i) {  
  3.     o.node.style[ pos ] = (o.current = Math.round(method.call( this, o ))) + "px";  
  4. });  
 

而_horizontal属性就记录了是否水平方向滑动,即是否right或left。
在计算尺寸时,通过它来指定使用用水平还是垂直方向的尺寸。

还有一个_reverse属性,判断是否bottom或right模式。
这个属性是为了解决一个问题,例如right模式要实现类似下面的效果:

有两种方法,可以调整元素插入顺序:

有两种方法,可以调整元素插入顺序:
Java代码  收藏代码
  1. <div class="container">  
  2.     <div style="right:0;">2</div>  
  3.     <div style="right:100px;">1</div>  
  4.     <div style="right:200px;">0</div>  
  5. </div>  
 但这样需要修改dom结构,或者通过zIndex设置堆叠顺序:
Java代码  收藏代码
  1. <div class="container">  
  2.     <div style="right:200px;z-index:3;">0</div>  
  3.     <div style="right:100px;z-index:2;">1</div>  
  4.     <div style="right:0;z-index:1;">2</div>  
  5. </div>  

显然设置zIndex的方法比较好,程序也用了这个方法。
程序就是用_reverse属性来判断是否需要做这些修正。

首先在_initContainer中,根据_reverse重新设置zIndex:
Java代码  收藏代码
  1. var zIndex = 100, gradient = this._reverse ? -1 : 1;  
  2. this._each( function(o){  
  3.     var style = o.node.style;  
  4.     style.position = "absolute"; style.zIndex = zIndex += gradient;  
  5. });  
 在_initNodes中,获取默认目标值时也要判断:
Java代码  收藏代码
  1. getDefaultTarget = this._reverse  
  2.     ? function(i){ return defaultSize * ( maxIndex - i ); }  
  3.     : function(i){ return defaultSize * i; },  

当_reverse为true时,由于定点位置是在索引的反方向,设置元素时也应该倒过来设的,所以要用maxIndex减一下。

在_setMove中,根据索引设置滑动目标值时,也要判断:
Java代码  收藏代码
  1. if ( this._reverse ) {  
  2.     var get = getTarget;  
  3.     index = maxIndex - index;  
  4.     getTarget = function(o, i){ return get( o, maxIndex - i ); }  
  5. }  

不但滑动对象集合的索引要修正,展示对象的索引也要修正。


【自动展示扩展】

这次扩展用的是组合模式,原理参考的ImageZoom扩展篇的扩展模式部分 。
不同的是加了一个属性扩展,用来添加扩展方法:
Java代码  收藏代码
  1. $$.extend( this, prototype );  

注意不能添加到SlideView.prototype,这样会影响到SlideView的结构。

“自动展示”要实现的是滑动对象自动轮流展示,并且取消默认状态而实行强制展示,可以用在图片的轮换展示。
只要在SlideView后面加入自动展示扩展程序,并且auto参数设为true就会启用。
原理也很简单,就是每次滑动/移动完成后,用定时器执行下一次滑动就行了。

首先在"init"初始化程序中,增加一个_NEXT程序,用来展示下一个滑动对象:
Java代码  收藏代码
  1. this._NEXT = $$F.bind( function(){ this.show( this._index + 1 ); }, this );  
其实就是把当前索引_index加1之后作为show的参数执行。
再增加一个_autoNext方法:
Java代码  收藏代码
  1. if ( !this._autoPause ) {  
  2.     clearTimeout(this._autoTimer);  
  3.     this._autoTimer = setTimeout( this._NEXT, this.autoDelay );  
  4. }  

作用是延时执行_NEXT程序,并且有一个_autoPause属性用来锁定执行。

然后设置几个需要执行的地方。
首先在"finish"完成滑动事件中,执行_autoNext方法,这样就实现了基本的自动展示了。
在鼠标进入滑动元素后,应该停止自动切换,所以在"enter"进入滑动元素事件中,会清除定时器并把_autoPause设为true来锁定。
对应地在"leave"鼠标离开容器事件中,要把_autoPause设回false解除锁定,再执行_autoNext方法重新启动自动程序。
并且在"leave"中设置autoClose为false,防止自动恢复默认状态。

最后还要重写reset:
Java代码  收藏代码
  1. reset.call( this, index == undefined ? this._index : index );  
  2. this._autoNext();   

重写后的reset会强制设置索引来展示,并执行_autoNext进行下一次滑动。


【提示信息扩展】

“提示信息”效果是指每个滑动对象对应有一个提示信息(内容)的层(元素)。
这个提示信息会在滑动对象展示时展示,收缩和关闭时关闭。
只要加入提示信息扩展程序,并且tip参数设为true就会启用。

提示扩展支持四种位置提示:bottom、top、right、left。
在"init"中,根据自定义tipMode获取_tipPos坐标样式:
Java代码  收藏代码
  1. this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";  
 接着在"initNodes"定义一个能根据滑动元素获取提示元素的函数:
Java代码  收藏代码
  1. var opt = this.options, tipTag = opt.tipTag, tipClass = opt.tipClass,  
  2.     re = tipClass && new RegExp("(^|\\s)" + tipClass + "(\\s|$)"),  
  3.     getTipNode =  function(node){  
  4.         var nodes = node.getElementsByTagName( tipTag );  
  5.         if ( tipClass ) {  
  6.             nodes = $$A.filter( nodes, function(n){ return re.test(n.className); } );  
  7.         }  
  8.         return nodes[0];  
  9.     };  

如果自定义了tipTag,就会根据标签来获取元素,否则就按默认值"*"获取全部元素。
如果自定义了tipClass,就会再根据className来筛选元素,注意可能包含多个样式,不能直接等于。

得到函数后,再创建提示对象:
Java代码  收藏代码
  1. this._each( function(o) {  
  2.     var node = o.node, tipNode = getTipNode(node);  
  3.     node.style.overflow = "hidden";  
  4.     tipNode.style.position = "absolute"; tipNode.style.left = 0;  
  5.       
  6.     o.tip = {  
  7.         "node": tipNode,  
  8.         "show": tipShow != undefined ? tipShow : 0,  
  9.         "close": tipClose != undefined ? tipClose : -tipNode[offset]  
  10.     };  
  11. });  

先获取提示元素,并设置相关样式,再给滑动对象添加一个tip属性,保存对应的提示对象。
其中"node"属性保存提示元素,"show"是展示时的坐标值,"close"是关闭时的坐标值。
如果没有自定义tipShow,默认展示时坐标值是0,即提示元素刚好贴在滑动元素边上的位置;
如果没有自定义tipClose,默认关闭时坐标是提示元素的尺寸,即提示元素刚好隐藏在滑动元素外面的位置。

在"setMove"中设置提示移动目标值:

Java代码  收藏代码
  1. var maxIndex = this._nodes.length - 1;  
  2. this._each( function(o, i) {  
  3.     var tip = o.tip;  
  4.     if ( this._reverse ) { i = maxIndex -i; }  
  5.     tip.target = index == undefined || index != i ? tip.close : tip.show;  
  6.     tip.begin = tip.current; tip.change = tip.target - tip.begin;  
  7. });  

这个比滑动对象的设置简单得多,当设置了index参数,并且index等于该滑动对象的索引时才需要展示,其他情况都是隐藏。
要注意,跟滑动对象一样,在_reverse为true的时候需要修正索引。
在"tweenMove"、"targetMove"、"defaultMove"也要设置对应的移动函数。

为了方便样式设置,扩展了一个_setTipPos方法:
Java代码  收藏代码
  1. var pos = this._tipPos;  
  2. this._each( function(o, i) {  
  3.     var tip = o.tip;  
  4.     tip.node.style[ pos ] = (tip.current = method.call( this, tip )) + "px";  
  5. });  

根据_tipPos坐标样式来设置坐标值。


使用技巧

【展示尺寸】

要自定义展示尺寸可以通过max和min来设置,可以按像素或百分比来计算。
如果不设置的话,就会按照元素本身的尺寸来展示。
所以滑动元素展示的尺寸并不需要一致的,程序可以自动计算。

【Accordion效果】

Accordion是可折叠的面板控件,效果类似手风琴,SlideView通过设置也能做到类似的效果。
首先把autoClose设为false取消自动关闭,再设置defaultIndex,使SlideView处于展开状态不会关闭。
一般Accordion都有一个固定尺寸的标题,这个可以用min来设置。
这样就实现了简单的Accordion效果,具体参考第三个实例。


使用说明

实例化时,必须有容器对象或id作为参数:
Java代码  收藏代码
  1. new SlideView( "idSlideView" );  
 可选参数用来设置系统的默认属性,包括:
属性:    默认值//说明
nodes:   null,//自定义展示元素集合
mode:   "left",//方向
max:   0,//展示尺寸(像素或百分比)
min:   0,//收缩尺寸(像素或百分比)
delay:   100,//触发延时
interval:  20,//滑动间隔
duration:  20,//滑动持续时间
defaultIndex: null,//默认展示索引
autoClose:  true,//是否自动恢复
tween:   function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; },//tween算子
onShow:   function(index){},//滑动展示时执行
onClose:  function(){}//滑动关闭执行
其中interval、delay、duration、tween、autoClose、onShow、onClose属性可以在程序初始化后动态设置。

还提供了以下方法:
show:根据索引滑动展示;
close:滑动到默认状态;
reset:重置为默认状态或展开索引对应滑动对象;
dispose:销毁程序。

要使用自动展示,只要在SlideView后面加入自动展示扩展程序,并且auto参数设为true即可。
新增如下可选参数:
autoDelay: 2000//展示时间

要使用提示信息,只要加入提示信息扩展程序,并且tip参数设为true即可。
新增如下可选参数:
属性:    默认值//说明
tipPos:  "bottom",//提示位置
tipTag:  "*",//提示元素标签
tipClass: "",//提示元素样式
tipShow: null,//展示时目标坐标
tipClose: null//关闭时目标坐标

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ASP.NET中过滤HTML字符串的两个方法
先记下来,以作备用!         ///   去除HTML标记        ///               ///              ///   包括HTML的源码           ///   已经去除后的文字           public static string G...
558 0
轨迹系列——记某真实项目中轨迹展示查询效率优化方案三(汇总实验)
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.    方案整体描述 1.1存储   a.使用redis存储当天所有人员的轨迹,在当天深夜进行redis中轨迹迁移。
876 0
Elastislide - 响应式的图片循环展示效果
  Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备。提供了四种效果:水平图片传送带、垂直图片传送带、固定在屏幕底部以及缩略图形式预览。
698 0
Flutter中ListView加载图片数据的优化
在使用ListView懒加载模式时,当ListView的Item中有图片信息时,在快速滚动过程中会大量的浪费流量与内存,甚至会造成在滚动过程中页面的卡顿效果。 在这里提出优化方案,当开始滚动时不加载图片,滚动结束后再加载图片,这个优化方案实现的效果如下图所示,在快速滑动列表数据时,图片未加载,运行内存无明显波动。
0 0
仿微信PhotoView+Viewpager浏览视频,图片,切换下一页前一页恢复原本大小
仿微信PhotoView+Viewpager浏览视频,图片,切换下一页前一页恢复原本大小
0 0
Compose中实现原生TabView+ViewPager的效果
Compose中实现原生TabView+ViewPager的效果
0 0
Flutter ListView懒加载(滑动不加载,停止滑动加载)
前言:为了更好的减小网络的带宽,使得列表更加流畅,我们需要了解懒加载,也称延迟加载。关于上一章的登录界面,各位属实难为我了,我也在求ui小姐姐,各位点点赞给我点动力吧~
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载