看到jQuery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个。
其中的难点在于怎么设计各个滑动对象进行想要的滑动。
一开始我想的是利用滑动对象的宽度的变化来实现滑动,
但实行起来发现这个只能在理想状态下实现,一般实现起来很困难。
所以还是参照了实例中的方法,利用left的变化来实现滑动。
效果预览
下载完整测试代码
程序原理:
设计之初,先不要考虑文本显示那部分,把重心放到滑动效果的实现上,
减少设计负担,这是小小的技巧吧。
总体的思路是通过移动各个滑动对象到指定的位置来实现不同的效果。
效果有两种,分部是:鼠标移出容器时的默认效果和鼠标移到某个滑动对象时的展示效果。
根据效果可以看出,滑动对象有三种宽度一个是默认宽度,最大宽度和最小宽度。
这些宽度都可以在初始化时设置:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->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 图片切换展示效果)。
不断移动,直到所有滑动对象都到达目标值:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->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:是否显示说明文本;
能实现什么功能就看各位的想象力了。
程序测试:
实例化对象:
new GlideView("idGlideView", 1000, "div", 500, { TextTag: "a", TextHeight: 50 });
其中参数分别是容器对象,容器宽度,展示标签,展示宽度,最后是一些设置。
- 大小: 79 KB
- 大小: 21.9 KB
分享到:
相关推荐
SlideView javascript图片滑动扩展收缩展示效果.zip
网页模板——SlideView javascript图片滑动扩展收缩展示效果
JavaScript,图片,切换,滑动,变换,Tween,缓动,图片切换,slide,展示
苹果mac图片滑动效果,滑动javascript特效,apple滑动图片展示
本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head>...
javaScript实现图片在页面的滑动效果,让你的界面更加美化。(注:转自cloudgamer博客)。
鼠标滑动显示文字效果,鼠标滑动到图片上,图片文字介绍显示效果
JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval...
内容索引:脚本资源,Ajax/JavaScript,滑动,图片展示 SlideView 是一款基于Js高手所写的插件CJL.0.1.min.js编写而成,用来形成div、图片等的滑动展示效果,用它我们可以制作一些滑动导航菜单、图片切换展示等,比较...
html+css+js实现的多款图片照版切换、翻转、滑动展示效果源码
SlideView 是一款基于Js高手所写的插件CJL.0.1.min.js编写而成,用来形成div、图片等的滑动展示效果,用它我们可以制作一些滑动导航菜单、图片切换展示等,比较典型的手风琴菜单就是基于本插件完成,现在示例包中有...
JavaScript实现简单的轮播图效果 轮播图:在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。这些图片就都是轮播图,这个模块就叫做轮播模块。 如何实现轮播图 如何才能在js里面...
内容索引:脚本资源,Ajax/JavaScript,图片滚动 cloudgamer仿照Apple官网的产品展示做的一个图片滑动展示效果。除了原来的点击缓动滑移、拖动滑移等效果外,cloudgamer还加入了特有的滚轮和键盘控制,滑动条两端鼠标...
15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片...
JavaScript滑动的日期新闻导航代码,这款效果来自腾讯网。网页自适应大小,打开后网页慢慢展开,一个小圆点对应一个事件和日期,鼠标放在小圆点上,会显示出对应的事件标题和图片,这些事件信息在HTML代码里修改和...
14.2.5 图片滑动效果 423 14.2.6 三维相册 433 14.3 时间特效 442 14.3.1 时钟提示自动关闭 442 14.3.2 日历生成器 444 14.4 窗口特效 450 14.4.1 窗口拖动 451 14.4.2 图层受标签控制显示 457 14.5 鼠标特效 460 ...
15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片...
看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。由于有了做图片滑动展示效果的经验,做这个就容易得多了。
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0 , FF 1.5 , Safari 2.0 , Opera 9.0 ),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户...