仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换只对应ie,ff只能看到一般的切换。这个js做的效果最早在sina看到,这里把这个效果封装好方便使用。
前台效果预览
下载完整程序
ps:由于有些绿色版ie6会把滤镜功能去掉,所以用这类ie6会看不到效果的,用正宗版本就可以正常浏览了。
程序说明:
图片未开始转换时,由于没有图片会显示一个红x,所以隐藏图片:
this._img.style.visibility = "hidden";
ps:以前我用this._img.src = "javascript:void(0);";但这个在ie8会出错。
这个变换效果需要滤镜,所以只支持ie。要使用变换滤镜,要先设置filter:
this._img.style.filter = "revealTrans()"
变换之前先设置两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数。
此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。
设置完后还需要运行apply和play方法,分别是应用变换效果和运行效果:
with(this._img.filters.revealTrans){
Transition = this.Transition; Duration = this.Duration; apply(); play();
}
除了这两个方法还有一个stop方法用来停止效果。
下面列出所有效果和对应Transition值(参考手册):
值 : 效果
0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。
其中23比较特别,是随机效果,程序默认就是随机效果。
设置完滤镜效果后就修改图片的src就开始转换了。
然后设置链接:
!!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
要注意的是这里用removeAttribute去掉a的href才能去掉链接,如果只设为空那么链接还是去不掉的。
使用说明:
首先要实例化一个对象:
var rvt = new RevealTrans("idPicShow");
idPicShow就是显示变换的容器对象。
有以下这些可选参数和属性:
属性:默认值//说明
Auto: true,//是否自动切换
Pause: 1000,//停顿时间(微妙)
Duration: 1,//变换持续时间(秒)
Transition: 23,//变换效果(23为随机)
List: [],//数据集合,如果这里不设置可以用Add方法添加
onShow: function(){}//变换时执行
其中List是数据集合,其中每个元素结构是这样的:
{ img: 图片url, text: 相关文本, url: 相关链接 }
在使用时要注意,也可以在实例化之后用Add方法添加:
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
可以一个一个添加,这样方便后台用循环输出数据。
至于图片列表、按钮和文本显示区域是自己扩展的部分,详细请看实例。
全部设置完成后就可以用Start开始变换程序了:
rvt.Start();
其他图片展示效果:
JavaScript 图片滑动展示效果
JavaScript 图片切换展示效果
- 大小: 32.1 KB
分享到:
相关推荐
JavaScript图片旋转效果,纯粹的JS源码
JavaScript图片切换效果 演示地址:http://down.admin5.com/demo/code_pop/4/50/
javascript效果javascript效果javascript效果javascript效果
JavaScript图片切换展示效果
javascript图片自动切换效果 javascript图片自动切换效果
JavaScript图片拖动效果,纯粹的JS图片拖动效果!!
javascript 实现图片轮转效果,效果页面可查看当当品牌店铺
JavaScript 图片切割效果 v2.0 JavaScript 图片切割效果 v2.0
关于JavaScript 图片效果, 跟大家分享一下。
JavaScript图片切换展示效果,效果非常好
IE启用javascript IE启用javascript IE启用javascript IE启用javascript IE启用javascript
JavaScript 图片滑动切换效果JavaScript 图片滑动切换效果JavaScript 图片滑动切换效果
javascript 实现点击超链接变换图片 javascript 实现点击超链接变换图片
javascript图片切换效果,由http://www.che2.com/提供
JavaScript 图片切割效果(带拖放、缩放效果) JavaScript 图片切割效果(带拖放、缩放效果)
简单、实用的javascript图片幻灯效果。
javascript 图片放大效果.zip
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难。 不过群众的智慧是...
27:___从两侧向中间拼合的JavaScript图片切换效果 28:___仿265网站LOGO,会盯着你看的眼睛 29:___像弹簧一样抖动的横向图片滚动 30:___前后轮翻的JS图片幻灯切换 31:___动态的Loading文字,逐个变大 32:___可控的...