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中常用的55个经典技巧
Aug 12 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 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递归实现层级树状展开
2016/04/01 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python中random模块用法实例分析
2015/05/19 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
一个入门级python爬虫教程详解
2021/01/27 Python
仓管岗位职责范本
2014/02/08 职场文书
优秀员工获奖感言
2014/03/01 职场文书
公司活动总结怎么写
2014/06/25 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
校本研修个人总结
2015/02/28 职场文书
2015年科协工作总结
2015/05/19 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python