一个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 相关文章推荐
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
javascript iframe跨域详解
Oct 26 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
JS数组方法reduce的用法实例分析
Mar 03 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
vue组件间通信解析
2017/03/01 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
浅谈flask源码之请求过程
2018/07/26 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
详解python UDP 编程
2020/08/24 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
结婚典礼证婚词
2014/01/08 职场文书
出纳员岗位责任制
2014/02/11 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
诚信考试承诺书
2014/03/27 职场文书
学校评语大全
2014/05/06 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技
Python开发五子棋小游戏
2022/04/28 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers