javscript 漂亮的弹出层图片预览效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111com.net/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
*{margin:0;padding:0;list-style:inside none none;}
html{height:100%;overflow:hidden;}
body{background:#667594;font-size:12px;font-family:"宋体";height:100%;overflow:hidden;}
img{border:none;}
.imglist{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #fef;padding:10px 0;width:100%;}
.imglist ul{overflow:hidden;zoom:1;}
.imglist li{float:left;margin:0 10px;height:100%;}
.imglist li a{display:block;line-height:0;font-size:0;border:1px solid #fff;padding:1px;}
.imglist li img{}
.alt{color:#fff;display:block;text-align:center;margin:300px auto 0 auto;font-size:14px;font-weight:bold;line-}
.imglist2{bottom:150px;}
</style>
<script type="text/javascript">
function div(id){return document.getElementById(id);}
var ie=!-[1,];
var Obj={
	Create:function(id,id2,ele){
		var obj=document.createElement(ele);
		obj.setAttribute("id",id2);
		div(id).appendChild(obj);
		},
	del:function(id){
		var obj=div(id);
		obj.parentNode.removeChild(obj);
		},
	inner:function(id,text){
		div(id).innerHTML=text;
		},
	css:function(){
		this.cssinfo();
		var obj=div(this.css.id);
			with(obj.style){
			ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:"");
			this.css.background!=undefined?background=this.css.background:"";
			this.css.width!=undefined?";
			this.css.height!=undefined?";
			this.css.position!=undefined?position=this.css.position:"";
			this.css.left!=undefined?left=this.css.left:"";
			this.css.top!=undefined?top=this.css.top:"";
			this.css.bottom!=undefined?bottom=this.css.bottom:"";
			this.css.padding!=undefined?padding=this.css.padding:"";
			this.css.margin!=undefined?margin=this.css.margin:"";
			this.css.filter!=undefined?filter=this.css.filter:"";
			this.css.opacity!=undefined?opacity=this.css.opacity:"";
			this.css.zIndex!=undefined?zIndex=this.css.zIndex:"";
			this.css.border!=undefined?border=this.css.border:"";
			this.css.overflow!=undefined?overflow=this.css.overflow:"";
			this.css.display!=undefined?display=this.css.display:"";
			this.css.textAlign!=undefined?textAlign=this.css.textAlign:"";
			this.css.fontSize!=undefined?fontSize=this.css.fontSize:"";
			this.css.color!=undefined?color=this.css.color:"";
			this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:"";
			this.css.cursor!=undefined?cursor=this.css.cursor:"";
			this.css.lineHeight!=undefined?line";
			}
		},
	oEventX:function(e){
		var e=window.event?window.event:e;
		return e.clientX;
	},
	oEventY:function(e){
		var e=window.event?window.event:e;
		return e.clientY;
	}
}
var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY;
Obj.css.prototype.cssinfo=function(){
	this.css=css;
	return this;
}
</script>
</head>
<body>

<div id="ibody">
	<div class="imglist" id="imglist">
		<ul>
			<li><a href="http://www.zzsky.cn/effect/images/201005312100/423592_1.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://static4.images.tpzj.com/images/upload/2009/20091026/423/423592/423592_10.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://www.zzsky.cn/effect/images/201005312100/423592_25.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://www.zzsky.cn/effect/images/201005312100/423592_27.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://static9.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_28.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://static0.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_56.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
		</ul>
	</div>
	<div class="imglist imglist2" id="imglist2">
		<ul>
			<li><a href="http://www.zzsky.cn/effect/images/201005312100/423592_1.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://static4.images.tpzj.com/images/upload/2009/20091026/423/423592/423592_10.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://www.zzsky.cn/effect/images/201005312100/423592_25.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://www.zzsky.cn/effect/images/201005312100/423592_27.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://static9.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_28.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
			<li><a href="http://static0.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_56.jpg" title="哇！美女"><img  src="https://img.111com.net/get_pic/2010/03/20100602122805448.jpg" alt=""></a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
function iShow(objid){
	this.iControl="1"        /*1为图片大小自适应*/
	this.iControlSize=0.8    /*最大图片大小占可视区域比例(此项需要this.iControl=1)*/
	this.ibody="ibody";      /*bodyid*/
	this.bgid="container"    /*背景id*/
	this.borderid="wrap";    /*边框id*/
	this.boxid="imgwrap";    /*图像容器id*/
	this.listid=objid;       /*图像列表id*/
	this.borderSize=10;      /*边框大小*/
	this.titleSize=22;       /*标题区域大小*/
	this.alpha=3;            /*透明度---1~10*/
	this.bgc="000"           /*背景色*/
	/*默认弹出框样式*/
	this.w=420;
	this.h=226;
	this.c="#fff";
	this.w1=this.w+this.borderSize*2;
	this.h1=this.h+this.borderSize*2+this.titleSize;
	this.c1="#eee";
}
iShow.prototype.iMouse=function(){
	/*鼠标事件*/
	var iDel=this.iDel;
	var iLoad=this.iLoad,iStyle=this.iStyle;
	var ele={box:this.boxid,bd:this.borderid,bdSize:this.borderSize*2,tSize:this.titleSize,iCount:this.iCount,iControl:this.iControl,iControlSize:this.iControlSize}
	var eles=div(this.listid).getElementsByTagName("a");
	for(var i=0;i<eles.length;i++){
		eles[i].onclick=function(){
			iStyle(iDel);
			iLoad(this,ele);
			return false;
		}
	}
}
iShow.prototype.iStyle=function(iDel){
	/*对象初始化*/
	this.iShow.call(this)
	Create(this.ibody,this.bgid,"div");
	Create(this.ibody,this.borderid,"div");
	Create(this.ibody,this.boxid,"div");
	css={id:this.bgid,width:"100%",height:"100%",opacity:0.1*this.alpha,background:"#"+this.bgc,filter:"alpha(opacity="+10*this.alpha+")",position:"absolute",top:0,left:0}
	new Obj.css;
	css={id:this.borderid,background:this.c1,width:this.w1+"px",height:this.h1+"px",position:"absolute",margin:-this.h1/2+"px "+"0 0 "+-this.w1/2+"px",left:"50%",top:"50%",opacity:0.2,overflow:"hidden",filter:"alpha(opacity=20)"}
	new Obj.css;
	css={id:this.boxid,textAlign:"center",background:this.c,width:this.w+"px",height:this.h+"px",position:"absolute",margin:-(this.h+this.titleSize)/2+"px "+"0 0 "+-this.w/2+"px",left:"50%",top:"50%"}
	new Obj.css;
	inner(this.boxid,"<span style='display:block;margin-top:50px;color:#f30'>图片读取可能比较慢，请稍后……</span>")
	document.onkeydown=function(e){
		var e=e?e:window.event;
		if(e.keyCode=="27"){
			iDel();
		}
	}
	/*移动*/
	var obj1=div(this.borderid);
	var obj2=div(this.boxid);
	var Site=imgshow.Site;
	var Move=imgshow.Move;
	obj1.onmousedown=function(){Site(arguments[0],obj1,obj2);this.style.cursor="move";document.onmousemove=function(){Move(arguments[0],obj1,obj2)};}
	document.onmouseup=function(){this.onmousemove="";obj1.style.cursor=""}
}
iShow.prototype.iLoad=function(e,ele){
	var image=new Image();
	image.src=e.href;
	if(image.complete){Reset();}else{
		image.onload=function(){Reset();}
		}
	function Reset(){
		var iw0=image.width,ih0=image.height;
		var W0=iw0+ele.bdSize,H0=ih0+ele.bdSize+ele.tSize;
		function curSize(){
			css={id:borderid,width:W0+"px",height:H0+"px",left:"50%",top:"30px",margin:"0 0 0 "+-W0/2+"px"};
			new Obj.css;
			css={id:boxid,width:iw0+"px",height:ih0+"px",left:"50%",top:"30px",margin:ele.tSize/2+"px 0 0 "+-(W0-ele.bdSize)/2+"px"};
			new Obj.css;
		}
		var Size=(image.width>document.body.clientWidth*ele.iControlSize || image.height>document.body.clientHeight*ele.iControlSize)?true:false
		if(ele.iControl=="1" && Size==true){
			var iInfo=ele.iCount(image,ele.iControlSize);
			image.width=iInfo.iW,image.height=iInfo.iH;
		}
		var bt1="<a href='#' style='color:#fff;left:20px;text-decoration:none;' onclick='imgshow.iDel()'>关闭</a>";
		var bt2="<a href='#' style='color:#fff;margin-left:20px;text-decoration:none;' id='iZoom_cur'>原图大小</a>"
		var bt="<span style='float:right;text-align:left;'>"+bt1+bt2+"</span>";
		var text1="<a href=""+image.src+"" class="js-smartPhoto-pc" target="_blank"><img  src='"+image.src+"' style='width:100%' alt='"+e.title+"' /></a>";
		var text2="<span id='imgshow_title'>"+bt+e.title+"</span>"
		var text=text1+text2;
		var W=image.width+ele.bdSize,H=image.height+ele.bdSize+ele.tSize;
		css={id:borderid,width:W+"px",height:H+"px",left:"50%",top:"50%",margin:-H/2+"px"+" 0 0 "+-W/2+"px"};
		new Obj.css;
		css={id:boxid,width:image.width+"px",height:image.height+"px",left:"50%",top:"50%",margin:-(image.height+ele.tSize)/2+"px"+" 0 0 "+-image.width/2+"px"};
		new Obj.css;
		inner(ele.box,text);
		css={id:"imgshow_title",width:"100%",height:"22px",position:"absolute",bottom:"-26px",left:0,lineHeight:"22px",overflow:"hidden",color:"#fff"}
		new Obj.css;
		div("iZoom_cur").onclick=curSize;
	}
}
iShow.prototype.iCount=function(e,f){
	var doc=document.body,W=doc.clientWidth*f,H=doc.clientHeight*f;
	var obj=e.width/W>e.height/H?{iW:W,iH:e.height*W/e.width,iType:1}:{iW:e.width*H/e.height,iH:H,iTyle:2};
	return obj;
}
iShow.prototype.Site=function(e,obj1,obj2){
	this.X=oX(arguments[0]);
	this.Y=oY(arguments[0]);
	this.oLeft1=obj1.offsetLeft;
	this.oTop1=obj1.offsetTop;
	this.oLeft2=obj2.offsetLeft;
	this.oTop2=obj2.offsetTop;
}
iShow.prototype.Move=function(e,obj1,obj2){
	var X=oX(arguments[0])-this.X,Y=oY(arguments[0])-this.Y;
	var Left1=this.oLeft1+X,Top1=this.oTop1+Y,Left2=this.oLeft2+X,Top2=this.oTop2+Y;
	css={id:obj1.id,left:Left1+"px",top:Top1+"px",margin:0}
	new Obj.css;
	css={id:obj2.id,left:Left2+"px",top:Top2+"px",margin:0}
	new Obj.css;
}
iShow.prototype.iDel=function(){
	del(boxid);del(borderid);del(bgid);
	document.onkeydown='';
}
var imgshow=new iShow("imglist");
imgshow.iMouse();
var imgshow2=new iShow("imglist2");
imgshow2.iMouse();
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

javscript 漂亮的弹出层图片预览效果

相关文章

精彩推荐