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 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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
提取HTML标签
2006/10/09 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
深入分析PHP设计模式
2020/06/15 PHP
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python 显示数组全部元素的方法
2018/04/19 Python
详解Python中的正则表达式
2018/07/08 Python
Python实现全排列的打印
2018/08/18 Python
Python检测数据类型的方法总结
2019/05/20 Python
如何通过python实现人脸识别验证
2020/01/17 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
现代化办公人员工作的自我评价
2013/10/16 职场文书
厂长助理岗位职责
2013/12/27 职场文书
财产保全担保书范文
2014/04/01 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
公司仓库管理制度
2015/08/04 职场文书
班主任培训研修日志
2015/11/13 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
mysql的单列多值存储实例详解
2022/04/05 MySQL