手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
摘要:好多天没有发过日志了~最近写了一个图片浏览器,是为PHPCMS文件管理器设计的,但后来看到了Lightbox,所以就改了一下,可以给一般的网...

好多天没有发过日志了~

最近写了一个图片浏览器,是为PHPCMS文件管理器设计的,但后来看到了Lightbox,所以就改了一下,可以给一般的网页使用。

演示及说明地址:http://longbill.cn/down/sample/blueshow/index.htm

使用方法:

1.下载blueshow.js文件,放到服务器上你也可以直接使用这个:http://www.jb51.net/downtools/blueshow.js

2.在你要用此程序的网页中写上这句(在和之间):

<scriptsrc='http://yoursite/blueshow.js'></script>

http://yoursite/blueshow.js为你放置程序的地址

3.程序可以使用参数比如blueshow.js?lock=1&autorun=1

//说明:

//取值范围为0和1

//lock:表示显示图片时是否锁定原网页

//autorun:是否自动初始化(如果你的网页含有一些比较慢的统计代码强烈建议将此值设置为0)

//如果autorun=0那么请在网页的最后(统计代码之前)加上

<script>BlueShow();</script>

4.符合条件的图片包括:

a.

<ahref='fdsfa.jpg'>链接</a>

(指向图片的链接,包括gif,jpg,png,jpeg,bmp,等,具体见blueshow.js。如果图片是动态生成的,比如img.php?id=3那么在后面加上"&.gif"即可)

b.

<imgclass='blueshow'src='xxx.gif'/>

(class名中含有"blueshow"字符的img,如果img本来有class属性,那么再原来的class名后加空格再加"blueshow"即可)

复制代码 代码如下:

<html>

<head>

<title>BlueShowv1.0使用说明--ByLongbill</title>

<style>

a{text-decoration:none;color:#ff3333;}

.red{color:#ff3333}

body{text-align:center;background-image:url(http://longbill.cn/down/sample/blueshow/images/gezi.gif)}

div{text-align:left;padding:8px;border:1pxsolid#4499ee;margin:5px;width:700px;

font-size:12px;background-color:#d6e9fc;color:#333333;}

img{margin:5px;}

h1{color:#ff8c05;font-size:16px;display:block;margin:2px;padding:0px;}

</style>

</head>

<body>

<divstyle="font-size:24px;color:#3333ee;font-weight:bold;text-align:center;">BlueShowv1.0<astyle='font-size:12px;color:#ff8c05;font-weight:normal;text-decoration:none;'href='http://www.longbill.cn'target=_blank>ByLongbill</a></div>

<div>

<h1>使用方法:</h1>

1.下载blueshow.js文件,放到服务器上(<ahref='http://longbill.cn/down/blog/blueshow.js'target=_blank>点击这里下载</a>)你也可以直接使用这个:<spanclass=red>http://longbill.cn/down/blog/blueshow.js</span><br/>

2.在你要用此程序的网页中写上这句(在<body>和</body>之间):<br/>

<spanclass=red><scriptlanguage=javascriptsrc='http://yoursite/blueshow.js'></script></span>http://yoursite/blueshow.js为你放置程序的地址<br/>

3.程序可以使用参数比如blueshow.js?lock=1&autorun=1<br/>

//说明:<br/>

//取值范围为0和1<br/>

//lock:表示显示图片时是否锁定原网页<br/>

//autorun:是否自动初始化(如果你的网页含有一些比较慢的统计代码强烈建议将此值设置为0)<br/>

//如果autorun=0那么请在网页的最后(统计代码之前)加上<spanclass=red><scriptlanguage=javascript>BlueShow();</script></span>详情见本网页源代码<br/>

4.符合条件的图片包括:<br/>

a.<spanclass=red><ahref=xxxxx.jpg>链接</a></span>(指向图片的链接,包括gif,jpg,png,jpeg,bmp,等,具体见blueshow.js。如果图片是动态生成的,比如img.php?id=3那么在后面加上"&.gif"即可)<br/>

b.<spanclass=red><imgclass="blueshow"src=图片地址/></span>(class名中含有"blueshow"字符的img,如果img本来有class属性,那么再原来的class名后加空格再加"blueshow"即可)<br/>

<br/>

<astyle='font-size:16px;color:#ff8c05'href='http://longbill.cn/blog/index.php?id=54'target=_blank>到这里讨论</a>

</div>

<div>

链接样例:<br/>

<ahref='http://longbill.cn/down/sample/blueshow/images/boa01.jpg'>宝儿</a>

<ahref='http://longbill.cn/down/sample/blueshow/images/boa06.jpg'title='Boa!!!'>宝儿</a>

<ahref='http://longbill.cn/down/sample/blueshow/images/demo01.jpg'>PLMM</a>

<ahref='http://longbill.cn/down/sample/blueshow/images/meinv.jpg'>美女</a>

<ahref='http://longbill.cn/down/sample/blueshow/images/demo02.gif'>会动的人</a>

</div>

<div>

图片样例:<br/>

<imgclass="blueshow"src='http://www.google.com/logos/earthday05.gif'border=0style='width:200px;'alt='Google'/>

<imgclass="blueshow"src='http://www.google.com/logos/da_vinci.gif'border=0style='width:200px;'alt='Google!!!!'/>

<imgclass="blueshow"src='http://www.google.com/logos/van_gogh.gif'border=0style='width:200px;'alt='Gooooooogle!!!!!'/>

</div>

<scriptsrc='http://longbill.cn/down/blog/blueshow.js?lock=1&autorun=0'></script>

<script>

document.write=function(){returnfalse;}//不让统计代码显示东西

BlueShow();

</script>

【发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载】相关文章:

用javascript制作放大镜放大图片

AngularJS身份验证的方法

kindeditor编辑器点中图片滚动条往上顶的bug

javascript中一些util方法汇总

COOL而实用的动态效果

js+html5通过canvas指定开始和结束点绘制线条的方法

JavaScript框架是什么?怎样才能叫做框架?

Jquery动态添加输入框的方法

js脚本学习 比较实用的基础

浅谈javascript事件取消和阻止冒泡

精品推荐
分类导航