灯箱效果js

本文由清尘发表于2013-10-20 14:55最后修改于2015-10-20属于javascript分类
	var lightBox = function(){
		this.init.apply(this,arguments);
	}
	lightBox.prototype = {
		//构造器初始化方法
		init : function(id){
			//显示层
			if(!id && !(typeof id === "string")) return false;
			this.box = document.getElementById(id);
			this.box.style.zIndex = 10001;
			this.box.style.position = "absolute";
			this.box.style.display = "none";
			//覆盖层
			this.lay = document.body.insertBefore(document.createElement("div"),document.body.childNodes[0]); //创建一个div元素
			this.lay.style.display = "none"; 
			this.lay.style.backgroundColor = "#000";
			this.lay.style.zIndex = 10000;
			this.lay.style.position = "fixed";
			this.lay.style.left = 0;
			this.lay.style.top = 0;
			this.lay.style.width = "100%";
			this.lay.style.height = "100%";
			if(document.all){  //设置覆盖层透明度,兼容IE
				this.lay.style.filter = "alpha(opacity:60)";
			}else{ //设置覆盖层透明度,兼容其它浏览器
				this.lay.style.opacity = 0.6;
			}
		},
		//显示灯箱
		show: function(){
			this.lay.style.display = "block"; //显示灯箱覆盖层
			this.box.style.display = "block"; //显示灯箱
			var top = document.documentElement.scrollTop - this.box.offsetHeight / 2; 
			var left =document.documentElement.scrollLeft - this.box.offsetWidth /2;
			if(top>-300){
				this.box.style.marginTop = document.documentElement.scrollTop - this.box.offsetHeight / 2 + "px";
				this.box.style.top = "50%";
			}else{
				this.box.style.top = "50px";
			}
			if(left>-512){
				this.box.style.marginLeft = document.documentElement.scrollLeft - this.box.offsetWidth / 2 + "px";
				this.box.style.left = "50%";
			}else{
				this.box.style.left = "20px";
			}


		},
		//关闭灯箱
		close: function(){
			this.box.style.display = "none"; //隐藏灯箱
			this.lay.style.display = "none"; //隐藏覆盖层
		}

	}
	//灯箱广告调用函数
	function lightbox(){
		var box = new lightBox('lightbox');
		$("#idBoxCancel").click(function(){box.close();});
		$('#big_pic').click(function(){
			var url = $(".big_pic img").attr("src");
			$("#lightbox img").attr("src",url);
			box.show();
		})
		$("#big_pic").css("cursor","pointer");

	}

	window.onload = function(){
		//初始化设置
		initMenu("pics/class.xml");
		initThumbs("pics.xml","pics/1/");
		//调用灯箱特效
		lightbox();
	}