sina的lightbox效果。


Posted in Javascript onJanuary 09, 2007

使用时,只需要在A标签处加上rel="lightbox"即可。e.g:
<A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="100" width="100"></A>

我自己也写了一个,不过涉及两个模块,(func.js公用库,和imagesLoader.js图片载入类)过阵子一并发上来。
<STYLE type=text/css>
 HTML #overlay {
 FILTER: Alpha(opacity=50); BACKGROUND-IMAGE: url(images/blank.gif); BACKGROUND-COLOR: #000
}
</STYLE>
<SCRIPT language=javascript type=text/javascript>
<!--//
function addEvent(object, type, handler)
{
 if (object.addEventListener) {
 object.addEventListener(type, handler, false);
 } else if (object.attachEvent) {
 object.attachEvent(['on',type].join(''),handler);
 } else {
 object[['on',type].join('')] = handler;
 }
}
function WindowSize()
{ // window size object
 this.w = 0;
 this.h = 0;
 return this.update();
}
WindowSize.prototype.update = function()
{
 var d = document;
 this.w = 
 (window.innerWidth) ? window.innerWidth
 : (d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth
 : d.body.clientWidth;
 this.h = 
 (window.innerHeight) ? window.innerHeight
 : (d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight
 : d.body.clientHeight;
 return this;
};
function PageSize()
{ // page size object
 this.win = new WindowSize();
 this.w = 0;
 this.h = 0;
 return this.update();
}
PageSize.prototype.update = function()
{
 var d = document;
 this.w = 
 (window.innerWidth && window.scrollMaxX) ? window.innerWidth + window.scrollMaxX
 : (d.body.scrollWidth > d.body.offsetWidth) ? d.body.scrollWidth
 : d.body.offsetWidt;
 this.h = 
 (window.innerHeight && window.scrollMaxY) ? window.innerHeight + window.scrollMaxY
 : (d.body.scrollHeight > d.body.offsetHeight) ? d.body.scrollHeight
 : d.body.offsetHeight;
 this.win.update();
 if (this.w < this.win.w) this.w = this.win.w;
 if (this.h < this.win.h) this.h = this.win.h;
 return this;
};
function PagePos()
{ // page position object
 this.x = 0;
 this.y = 0;
 return this.update();
}
PagePos.prototype.update = function()
{
 var d = document;
 this.x =
 (window.pageXOffset) ? window.pageXOffset
 : (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft
 : (d.body) ? d.body.scrollLeft
 : 0;
 this.y =
 (window.pageYOffset) ? window.pageYOffset
 : (d.documentElement && d.documentElement.scrollTop) ? d.documentElement.scrollTop
 : (d.body) ? d.body.scrollTop
 : 0;
 return this;
};
function UserAgent()
{ // user agent information
 var ua = navigator.userAgent;
 this.isWinIE = this.isMacIE = false;
 this.isGecko = ua.match(/Gecko\//);
 this.isSafari = ua.match(/AppleWebKit/);
 this.isOpera = window.opera;
 if (document.all && !this.isGecko && !this.isSafari && !this.isOpera) {
 this.isWinIE = ua.match(/Win/);
 this.isMacIE = ua.match(/Mac/);
 this.isNewIE = (ua.match(/MSIE 5\.5/) || ua.match(/MSIE 6\.0/));
 }
 return this;
}
// === lightbox ===
function LightBox(option)
{
 var self = this;
 self._imgs = new Array();
 self._wrap = null;
 self._box = null;
 self._open = -1;
 self._page = new PageSize();
 self._pos = new PagePos();
 self._ua = new UserAgent();
 self._expandable = false;
 self._expanded = false;
 self._expand = option.expandimg;
 self._shrink = option.shrinkimg;
 return self._init(option);
}
LightBox.prototype = {
 _init : function(option)
 {
 var self = this;
 var d = document;
 if (!d.getElementsByTagName) return;
 var links = d.getElementsByTagName("a");
 for (var i=0;i<links.length;i++) {
 var anchor = links[i];
 var num = self._imgs.length;
 if (!anchor.getAttribute("href")
 || anchor.getAttribute("rel") != "lightbox") continue;
 // initialize item
 self._imgs[num] = {src:anchor.getAttribute("href"),w:-1,h:-1,title:'',cls:anchor.className};
 if (anchor.getAttribute("title"))
 self._imgs[num].title = anchor.getAttribute("title");
 else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute("title"))
 self._imgs[num].title = anchor.firstChild.getAttribute("title");
 anchor.onclick = self._genOpener(num); // set closure to onclick event
 }
 var body = d.getElementsByTagName("body")[0];
 self._wrap = self._createWrapOn(body,option.loadingimg);
 self._box = self._createBoxOn(body,option);
 return self;
 },
 _genOpener : function(num)
 {
 var self = this;
 return function() { self._show(num); return false; }
 },
 _createWrapOn : function(obj,imagePath)
 {
 var self = this;
 if (!obj) return null;
 // create wrapper object, translucent background
 var wrap = document.createElement('div');
 wrap.id = 'overlay';
 with (wrap.style) {
 display = 'none';
 position = 'fixed';
 top = '0px';
 left = '0px';
 zIndex = '50';
 width = '100%';
 height = '100%';
 }
 if (self._ua.isWinIE) wrap.style.position = 'absolute';
 addEvent(wrap,"click",function() { self._close(); });
 obj.appendChild(wrap);
 // create loading image, animated image
 var imag = new Image;
 imag.onload = function() {
 var spin = document.createElement('img');
 spin.id = 'loadingImage';
 spin.src = imag.src;
 spin.style.position = 'relative';
 self._set_cursor(spin);
 addEvent(spin,'click',function() { self._close(); });
 wrap.appendChild(spin);
 imag.onload = function(){};
 };
 if (imagePath != '') imag.src = imagePath;
 return wrap;
 },
 _createBoxOn : function(obj,option)
 {
 var self = this;
 if (!obj) return null;
 // create lightbox object, frame rectangle
 var box = document.createElement('div');
 box.id = 'lightbox';
 with (box.style) {
 display = 'none';
 position = 'absolute';
 zIndex = '60';
 }
 obj.appendChild(box);
 // create image object to display a target image
 var img = document.createElement('img');
 img.id = 'lightboxImage';
 self._set_cursor(img);
 addEvent(img,'click',function(){ self._close(); });
 addEvent(img,'mouseover',function(){ self._show_action(); });
 addEvent(img,'mouseout',function(){ self._hide_action(); });
 box.appendChild(img);
 var zoom = document.createElement('img');
 zoom.id = 'actionImage';
 with (zoom.style) {
 display = 'none';
 position = 'absolute';
 top = '15px';
 left = '15px';
 zIndex = '70';
 }
 self._set_cursor(zoom);
 zoom.src = self._expand;
 addEvent(zoom,'mouseover',function(){ self._show_action(); });
 addEvent(zoom,'click', function() { self._zoom(); });
 box.appendChild(zoom);
 addEvent(window,'resize',function(){ self._set_size(true); });
 // close button
 if (option.closeimg) {
 var btn = document.createElement('img');
 btn.id = 'closeButton';
 with (btn.style) {
 display = 'inline';
 position = 'absolute';
 right = '10px';
 top = '10px';
 width = '15px';
 height = '15px';
 zIndex = '80';
 }
 btn.src = option.closeimg;
 self._set_cursor(btn);
 addEvent(btn,'click',function(){ self._close(); });
 box.appendChild(btn);
 }
 // caption text
 var caption = document.createElement('span');
 caption.id = 'lightboxCaption';
 with (caption.style) {
 display = 'none';
 position = 'absolute';
 zIndex = '80';
 }
 box.appendChild(caption);
 // create effect image
 if (!option.effectpos) option.effectpos = {x:0,y:0};
 else {
 if (option.effectpos.x == '') option.effectpos.x = 0;
 if (option.effectpos.y == '') option.effectpos.y = 0;
 }
 var effect = new Image;
 effect.onload = function() {
 var effectImg = document.createElement('img');
 effectImg.id = 'effectImage';
 effectImg.src = effect.src;
 if (option.effectclass) effectImg.className = option.effectclass;
 with (effectImg.style) {
 position = 'absolute';
 display = 'none';
 left = [option.effectpos.x,'px'].join('');;
 top = [option.effectpos.y,'px'].join('');
 zIndex = '90';
 }
 self._set_cursor(effectImg);
 addEvent(effectImg,'click',function() { effectImg.style.display = 'none'; });
 box.appendChild(effectImg);
 };
 if (option.effectimg != '') effect.src = option.effectimg;
 return box;
 },
 _set_photo_size : function()
 {
 var self = this;
 if (self._open == -1) return;
 var imag = self._box.firstChild;
 var targ = { w:self._page.win.w - 30, h:self._page.win.h - 30 };
 var orig = { w:self._imgs[self._open].w, h:self._imgs[self._open].h };
 // shrink image with the same aspect
 var ratio = 1.0;
 if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w)

 ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;
 imag.width = Math.floor(orig.w * ratio);
 imag.height = Math.floor(orig.h * ratio);
 self._expandable = (ratio < 1.0) ? true : false;
 if (self._ua.isWinIE) self._box.style.display = "block";
 self._box.style.top = [self._pos.y + (self._page.win.h - imag.height - 30) / 2,'px'].join('');
 self._box.style.left = [((self._page.win.w - imag.width - 30) / 2),'px'].join('');
 self._show_caption(true);
 },
 _set_size : function(onResize)
 {
 var self = this;
 if (self._open == -1) return;
 self._page.update();
 self._pos.update();
 var spin = self._wrap.firstChild;
 if (spin) {
 var top = (self._page.win.h - spin.height) / 2;
 if (self._wrap.style.position == 'absolute') top += self._pos.y;
 spin.style.top = [top,'px'].join('');
 spin.style.left = [(self._page.win.w - spin.width - 30) / 2,'px'].join('');
 }
 if (self._ua.isWinIE) {
 self._wrap.style.width = [self._page.win.w,'px'].join('');
 self._wrap.style.height = [self._page.h,'px'].join('');
 }
 if (onResize) self._set_photo_size();
 },
 _show_action : function()
 {
 var self = this;
 if (self._open == -1 || !self._expandable) return;
 var obj = document.getElementById('actionImage');
 if (!obj) return;
 obj.src = (self._expanded) ? self._shrink : self._expand;
 obj.style.display = 'inline';
 },
 _hide_action : function()
 {
 var self = this;
 var obj = document.getElementById('actionImage');
 if (obj) obj.style.display = 'none';
 },
 _zoom : function()
 {
 var self = this;
 if (self._expanded) {
 self._set_photo_size();
 self._expanded = false;
 } else if (self._open > -1) {
 var imag = self._box.firstChild;
 self._box.style.top = [self._pos.y,'px'].join('');
 self._box.style.left = '0px';
 imag.width = self._imgs[self._open].w;
 imag.height = self._imgs[self._open].h;
 self._show_caption(false);
 self._expanded = true;
 }
 self._show_action();
 },
 _show_caption : function(enable)
 {
 var self = this;
 var caption = document.getElementById('lightboxCaption');
 if (!caption) return;
 if (caption.innerHTML.length == 0 || !enable) {
 caption.style.display = 'none';
 } else { // now display caption
 var imag = self._box.firstChild;
 with (caption.style) {
 top = [imag.height + 10,'px'].join(''); // 10 is top margin of lightbox
 left = '0px';
 width = [imag.width + 20,'px'].join(''); // 20 is total side margin of lightbox
 height = '1.2em';
 display = 'block';
 }
 }
 },
 _show : function(num)
 {
 var self = this;
 var imag = new Image;
 if (num < 0 || num >= self._imgs.length) return;
 var loading = document.getElementById('loadingImage');
 var caption = document.getElementById('lightboxCaption');
 var effect = document.getElementById('effectImage');
 self._open = num; // set opened image number
 self._set_size(false); // calc and set wrapper size
 self._wrap.style.display = "block";
 if (loading) loading.style.display = 'inline';
 imag.onload = function() {
 if (self._imgs[self._open].w == -1) {
 // store original image width and height
 self._imgs[self._open].w = imag.width;
 self._imgs[self._open].h = imag.height;
 }
 if (effect) {
 effect.style.display = (!effect.className || self._imgs[self._open].cls == effect.className)
 ? 'block' : 'none';
 }
 if (caption) caption.innerHTML = self._imgs[self._open].title;
 self._set_photo_size(); // calc and set lightbox size
 self._hide_action();
 self._box.style.display = "block";
 self._box.firstChild.src = imag.src;
 self._box.firstChild.setAttribute('title',self._imgs[self._open].title);
 if (loading) loading.style.display = 'none';
 };
 self._expandable = false;
 self._expanded = false;
 imag.src = self._imgs[self._open].src;
 },
 _set_cursor : function(obj)
 {
 var self = this;
 if (self._ua.isWinIE && !self._ua.isNewIE) return;
 obj.style.cursor = 'pointer';
 },
 _close : function()
 {
 var self = this;
 self._open = -1;
 self._hide_action();
 self._wrap.style.display = "none";
 self._box.style.display = "none";
 }
};
// === main ===
addEvent(window,"load",function() {
 var lightbox = new LightBox({
 loadingimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/loading.gif',
 expandimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/expand.gif',
 shrinkimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/shrink.gif',
 effectimg:'images/zzoop.gif',
 effectpos:{x:-40,y:-20},
 effectclass:'images/effectable',
 closeimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/close.gif'
 });
});
//-->
</SCRIPT>

 <A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="100" width="100"></A>
 <a href="http://blog.never-online.net/article.asp?id=83" target="_blank">click here for back点击返回</a>

Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
javascript动态加载三
Aug 22 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 #Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 #Javascript
兼容Mozilla必须知道的知识。
Jan 09 #Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 #Javascript
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 #Javascript
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 #Javascript
一个对于js this关键字的问题
Jan 09 #Javascript
You might like
PHP获取网卡地址的代码
2008/04/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python异常处理操作实例详解
2018/05/10 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
const和static readonly区别
2013/05/20 面试题
三分钟英语演讲稿
2014/04/24 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
给医院的感谢信
2015/01/21 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
离婚代理词范文
2015/05/23 职场文书
初中同学会致辞
2015/08/01 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python