一个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 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
vue如何从接口请求数据
Jun 22 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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
西德产收音机
2021/03/01 无线电
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Django后台admin的使用详解
2019/07/08 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
汽车广告策划方案
2014/05/31 职场文书
生物技术专业求职信
2014/06/10 职场文书
2014年老干部工作总结
2014/11/21 职场文书
工作自我评价范文
2015/03/05 职场文书
赢在中国观后感
2015/06/02 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python