一个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 实现TreeView CheckBox全选效果
Jan 11 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
JS重载实现方法分析
Dec 16 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
js实现点击烟花特效
Oct 14 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
php IP转换整形(ip2long)的详解
2013/06/06 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python能否java成为主流语言吗
2020/06/22 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
总经理助理职责
2014/02/04 职场文书
新年爱情寄语
2014/04/08 职场文书
大学社团计划书
2014/05/01 职场文书
2015年教师节主持词
2015/07/03 职场文书
安全教育日主题班会
2015/08/13 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js