JavaScript 图片滑动展示效果

最新推荐文章于 2020-12-11 16:31:52 发布

clear1984

最新推荐文章于 2020-12-11 16:31:52 发布

阅读量377

点赞数

分类专栏： JavaScript 文章标签： JavaScript jQuery 框架 ViewUI

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

看到jQuery实例：图片展示效果后，我也想拿来试试，但我不太喜欢用框架，所以自己做了个。
其中的难点在于怎么设计各个滑动对象进行想要的滑动。
一开始我想的是利用滑动对象的宽度的变化来实现滑动，
但实行起来发现这个只能在理想状态下实现，一般实现起来很困难。
所以还是参照了实例中的方法，利用left的变化来实现滑动。

效果预览

下载完整测试代码

程序原理：

设计之初，先不要考虑文本显示那部分，把重心放到滑动效果的实现上，
减少设计负担，这是小小的技巧吧。

总体的思路是通过移动各个滑动对象到指定的位置来实现不同的效果。
效果有两种，分部是：鼠标移出容器时的默认效果和鼠标移到某个滑动对象时的展示效果。
根据效果可以看出，滑动对象有三种宽度一个是默认宽度，最大宽度和最小宽度。
这些宽度都可以在初始化时设置：
this._list = oContainer.getElementsByTagName(sTag);
len = this._list.length;
this._count = len;
this._width = parseInt(iWidth / len);
this._width_max = parseInt(iMaxWidth);
this._width_min = parseInt((iWidth - this._width_max) / (len - 1));

我给每个滑动对象添加了一个_target属性来放一个目标值，用来告诉它要滑到哪里。

移动之前先执行Set()程序，给每个对象设置目标值，要分两种情况：

1.鼠标移出容器：这时只要设置滑动对象的目标值为默认宽度*索引值就行；

oList._target = this ._width * i;

2.鼠标移到某个滑动对象上：把当前对象和之前的滑动对象的目标值设为最小宽度*索引值，之后的对象设为最小宽度*(索引值-1)加上最大宽度（因为这样会算多一个最小宽度所以要减1个），这样设置就能得到要实现的效果：

oList._target = (i <= index) ? this ._width_min * i : this ._width_min * (i - 1 ) + this ._width_max;

接下来就是怎么移动到目标值了，这个在Move()程序中实现。
首先移动效果是通过用计时器逐步设置滑动对象的left来实现，减速部分用一个GetStep()程序来实现(相关说明请看JavaScript 图片切换展示效果)。
不断移动，直到所有滑动对象都到达目标值：
clearTimeout(this._timer);
var bFinish = true;
this.Each(function(oList, oText, i){
var nowLeft = parseInt(oList.style.left), iLeftStep = this.GetStep(oList._target, nowLeft);
if (iLeftStep != 0) { bFinish = false; oList.style.left = (nowLeft + iLeftStep) + "px"; }
})
if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }

这个程序本身的难度不高，就难在程序设计，例如怎么实现变化的效果（由于有实例难度就没那么高了）。
还有一个思想是把“移动到指定目标”这个任务分派到各个滑动对象，
主程序只要知道是否各个滑动对象都到达指定目标就行了，
这在给滑动对象设置_target属性和Each()程序的应用中能体现出来。
如果每次移动都由主程序来计算（试想想没有这个_target属性），难度会大大增加，
而设计之初很容易会陷入这个死胡同。

还有一点是容器的mouseout事件中，要先判断鼠标是否在容器外(相关说明请看JavaScript 自定义多级联动浮动菜单)。

扩展功能：

可以设置的属性：
Step: 滑动变化率；
Time: 滑动延时；
TextTag: 说明容器tag；
TextHeight: 说明容器高度；
Delay: 延迟值(微秒)；
Showtext：是否显示说明文本；

能实现什么功能就看各位的想象力了。

程序测试：

实例化对象：