发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载


Posted in Javascript onJuly 21, 2007

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

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

使用方法:  
1.下载 blueshow.js 文件,放到服务器上  你也可以直接使用这个: https://3water.com/downtools/blueshow.js 

2.在你要用此程序的网页中写上这句(在和之间): 
<script src='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. 
<a href='fdsfa.jpg'>链接</a> 
(指向图片的链接,包括gif,jpg,png,jpeg,bmp,等,具体见blueshow.js。 如果图片是动态生成的,比如 img.php?id=3 那么在后面加上 "&.gif" 即可) 
  b. 
<img class='blueshow' src='xxx.gif' /> 
 (class名中含有 "blueshow" 字符的img,如果img本来有class属性,那么再原来的class名后加空格再加"blueshow"即可) 

<html> 
<head> 
<title>Blue Show v1.0 使用说明 -- By Longbill</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:1px solid #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> 
<div style="font-size:24px;color:#3333ee;font-weight:bold;text-align:center;">Blue Show v1.0 <a style='font-size:12px;color:#ff8c05;font-weight:normal;text-decoration:none;' href='http://www.longbill.cn' target=_blank>By Longbill</a></div> 
<div> 
<h1>使用方法:  </h1> 
1.下载 blueshow.js 文件,放到服务器上 (<a href='http://longbill.cn/down/blog/blueshow.js' target=_blank>点击这里下载</a>) 你也可以直接使用这个: <span class=red>http://longbill.cn/down/blog/blueshow.js</span><br/> 
2.在你要用此程序的网页中写上这句(在<body>和</body>之间):<br/> 
<span class=red><script language=javascript src='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那么请在网页的最后(统计代码之前)加上 <span class=red><script language=javascript>BlueShow();</script></span> 详情见本网页源代码<br/> 
4.符合条件的图片包括:<br/> 
  a.<span class=red><a href=xxxxx.jpg>链接</a></span>(指向图片的链接,包括gif,jpg,png,jpeg,bmp,等,具体见blueshow.js。 如果图片是动态生成的,比如 img.php?id=3 那么在后面加上 "&.gif" 即可)<br/> 
  b.<span class=red><img class="blueshow" src=图片地址 /></span> (class名中含有 "blueshow" 字符的img,如果img本来有class属性,那么再原来的class名后加空格再加"blueshow"即可)<br/> 
<br/> 
<a style='font-size:16px;color:#ff8c05' href='http://longbill.cn/blog/index.php?id=54' target=_blank>到这里讨论</a> 
</div> 
<div> 
链接样例:<br/> 
<a href='http://longbill.cn/down/sample/blueshow/images/boa01.jpg'>宝儿</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/boa06.jpg' title='Boa!!!'>宝儿</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/demo01.jpg'>PLMM</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/meinv.jpg'>美女</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/demo02.gif'>会动的人</a> 
</div> 
<div> 
图片样例:<br/> 
<img class="blueshow" src='http://www.google.com/logos/earthday05.gif' border=0 style='width:200px;' alt='Google' /> 
<img class="blueshow" src='http://www.google.com/logos/da_vinci.gif' border=0 style='width:200px;' alt='Google!!!!' /> 
<img class="blueshow" src='http://www.google.com/logos/van_gogh.gif' border=0 style='width:200px;' alt='Gooooooogle!!!!!' /> 
</div> 
<script src='http://longbill.cn/down/blog/blueshow.js?lock=1&autorun=0'></script> 
<script> 
document.write = function () { return false;} //不让统计代码显示东西 
BlueShow(); 
</script>
Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
Vue如何实现组件间通信
May 15 Vue.js
用javascript实现读取txt文档的脚本
Jul 20 #Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 #Javascript
javascript实现unicode和字符的互相转换
Jul 18 #Javascript
js实现的网页颜色代码表全集
Jul 17 #Javascript
JTrackBar水平拖动效果
Jul 15 #Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 #Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 #Javascript
You might like
一些使用频率比较高的php函数
2008/10/03 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP内核探索之变量
2015/12/22 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
js实现无缝滚动图
2017/02/22 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python中的with...as用法介绍
2015/05/28 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python脚本定时发送邮件
2020/12/22 Python
写给女生的道歉信
2014/01/14 职场文书
关于期中考试的反思
2014/02/02 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
企业宣传口号
2014/06/12 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书