一个javascript图片阅览组件


Posted in Javascript onNovember 09, 2010

就是图片切换的效果是可自定义的,通过这个组件,我们可以自定义出很多效果,不过这个东西还不算最终完成,现在搞出来先让大家试试

var pola=new PhotoLook("contain");//建立PhotoLook对象

这就是实例化这个组件的语句,cantain是你指定div的ID,这个是使用组件的人自己定义的
/*PhotoLook大小的设置*/ 
pola.width=240; 
pola.height=320; 
/*添加图片*/ 
pola.add("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_s.jpg"); 
pola.init();

定义组件大小,还有利用提供的add方法来添加图片,然后调用init来初始化
/*淡出效果,效果可以自己做,自己添加,这个只是比较经典的(效果要接受一个参数,就是每一个小div,我们对它进行处理)*/ 
var fadeOut=function(div){ 
div.style.zIndex=1; 
div.style.opacity=0; 
div.style.filter="Alpha(Opacity='0')"; 
//div.filters.alpha.opacity=20; 
(function(div,opacity){ 
var hide=function() 
{ 
opacity=opacity+0.1; 
div.style.opacity=opacity; 
div.style.filter="Alpha(Opacity='"+opacity*100 +"')"; 
if(opacity<1) 
{ 
setTimeout(hide,100); 
} 
} 
hide(); 
})(div,0) } ;

添加一个淡出效果,注意,这个效果不是一定的,我们可以自己做出其他效果,再调用addswitchMethod来添加进组件对象里:
/*添加淡出效果(可以添加很多效果,并设定效果出现的顺序)*/
pola.addswitchMethod(fadeOut,"show");

下面是下面那个试例的效果矩阵配置

/*添加效果矩阵,仔细看矩阵数字的分布就可以知道哥大概了,数字小的会先发生效果*/ 
pola.addswitchTable([[1,2,3,4],[2,3,4,5],[3,4,5,6],[4,5,6,7]]); 
pola.addswitchTable([[1,2,1,2],[2,1,2,1],[1,2,1,2],[2,1,2,1]]); 
pola.addswitchTable([[1,2,3,4],[1,2,3,4],[1,2,3,4],[1,2,3,4]]); 
pola.addswitchTable([[1,2,3,4],[12,13,14,5],[11,16,15,6],[10,9,8,7]]); 
pola.addswitchTable([[1,2,3,4],[8,7,6,5],[5,6,7,8],[4,3,2,1]]); 
pola.addswitchTable([[1,2,3,1],[3,4,4,2],[2,4,4,3],[1,3,2,1]]); 
pola.addswitchTable([[1,1,4,4],[1,1,4,4],[3,3,2,2],[3,3,2,2]]); 
pola.addswitchTable([[1,10,4,14],[9,3,13,7],[2,12,6,16],[11,5,15,8]]);

大家一看就应该知道效果矩阵和切换效果之间的关系了吧。
下面大家看看一个例子吧,对了,因为图片都是从互联网上面直接拿的,都没有经过处理,第一轮切换的时候会有点卡卡的感觉,但是当它所有图片都缓冲好的时候就不卡了,就可以看到完整的效果
以后会加上预加载的功能,就可以大大减少这种情况的影响了(话说这些图片也太大了,无奈不知怎么在博客园上传图片,或者根本就没得上传)
只有大家点击了“初始化”按钮之后才可以看到相册。。。
完整配置代码
var pola=new PhotoLook("contain");//建立PhotoLook对象 
/*PhotoLook大小的设置*/ 
pola.width=240; 
pola.height=320; 
/*添加图片*/ 
pola.add("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg"); 
pola.add("http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_s.jpg"); 
pola.init(); 
/*淡出效果,效果可以自己做,自己添加,这个只是比较经典的(效果要接受一个参数,就是每一个小div,我们对它进行处理)*/ 
var fadeOut=function(div){ 
div.style.zIndex=1; 
div.style.opacity=0; 
div.style.filter="Alpha(Opacity='0')"; 
//div.filters.alpha.opacity=20; 
(function(div,opacity){ 
var hide=function() 
{ 
opacity=opacity+0.1; 
div.style.opacity=opacity; 
div.style.filter="Alpha(Opacity='"+opacity*100 +"')"; 
if(opacity<1) 
{ 
setTimeout(hide,100); 
} 
} 
hide(); 
})(div,0) } ; 

/*添加淡出效果(可以添加很多效果,并设定效果出现的顺序)*/ 
pola.addswitchMethod(fadeOut,"show"); 
/*添加效果矩阵,仔细看矩阵数字的分布就可以知道哥大概了,数字小的会先发生效果*/ 
pola.addswitchTable([[1,2,3,4], 
[2,3,4,5], 
[3,4,5,6], 
[4,5,6,7]]); 
pola.addswitchTable([[1,2,1,2], 
[2,1,2,1], 
[1,2,1,2], 
[2,1,2,1]]); 
pola.addswitchTable([[1,2,3,4], 
[1,2,3,4], 
[1,2,3,4], 
[1,2,3,4]]); 
pola.addswitchTable([[1,2,3,4], 
[12,13,14,5], 
[11,16,15,6], 
[10,9,8,7]]); 
pola.addswitchTable([[1,2,3,4], 
[8,7,6,5], 
[5,6,7,8], 
[4,3,2,1]]); 
pola.addswitchTable([[1,2,3,1], 
[3,4,4,2], 
[2,4,4,3], 
[1,3,2,1]]); 
pola.addswitchTable([[1,1,4,4], 
[1,1,4,4], 
[3,3,2,2], 
[3,3,2,2]]); 
pola.addswitchTable([[1,10,4,14], 
[9,3,13,7], 
[2,12,6,16], 
[11,5,15,8]]); 
/*给各按钮添加事件处理程序,这部分已经不算配置PhotoLook了*/ 
var buttonautoPlay=document.getElementById("autoPlay"); 
buttonautoPlay.onclick=function(){ 
pola.autoPlay(4000); 
} 
var buttonstopAutoPlay=document.getElementById("stopAutoPlay"); 
buttonstopAutoPlay.onclick=function(){ 
pola.stopAutoPlay(); 
} 
var buttonturn = document.getElementById("turn"); 
var textBox = document.getElementById("Text1"); 
buttonturn.onclick = function() { 
pola.goTo(parseInt(textBox.value)); 
} 
var buttonprevious = document.getElementById("previous"); 
buttonprevious.onclick = function() { 
pola.previous(); 
} 
var buttonnext = document.getElementById("next"); 
buttonnext.onclick = function() { 
pola.next(); 
}

组件代码下载
Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
js中格式化日期时间型数据函数代码
Nov 08 #Javascript
window.location.hash 使用说明
Nov 08 #Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 #Javascript
JavaScript游戏之优化篇
Nov 08 #Javascript
javascript开发中因空格引发的错误
Nov 08 #Javascript
window.ActiveXObject使用说明
Nov 08 #Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 #Javascript
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP打印输出函数汇总
2016/08/28 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
JS backgroundImage控制
2009/05/19 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
js实现tab切换效果
2017/02/16 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python线程池的实现实例
2013/11/18 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python高级用法总结
2018/05/26 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
考试违纪检讨书
2014/02/02 职场文书
反对邪教标语
2014/06/30 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
公司委托书范本5篇
2014/09/20 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
JavaScript流程控制(分支)
2021/12/06 Javascript