js点击小图弹出大图查看代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js点击小图弹出大图查看代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js点击小图弹出大图查看代码</title>
<script type="text/javascript" src="js/pic.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box" id="box">
	<ul>
    	<li><img src="images/1.jpg" width="100%" height="100%"></li>
        <li><img src="images/2.jpg" width="100%" height="100%"></li>
        <li><img src="images/3.jpg" width="100%" height="100%"></li>
        <li><img src="images/4.jpg" width="100%" height="100%"></li>
        <li><img src="images/5.jpg" width="100%" height="100%"></li>
        <li><img src="images/6.jpg" width="100%" height="100%"></li>
        <li><img src="images/7.jpg" width="100%" height="100%"></li>
        <li><img src="images/8.jpg" width="100%" height="100%"></li>
        <li><img src="images/9.jpg" width="100%" height="100%"></li>
        <li><img src="images/10.jpg" width="100%" height="100%"></li>
        <li><img src="images/11.jpg" width="100%" height="100%"></li>
        <li><img src="images/12.jpg" width="100%" height="100%"></li>
        <li><img src="images/13.jpg" width="100%" height="100%"></li>
        <li><img src="images/14.jpg" width="100%" height="100%"></li>
        <li><img src="images/15.jpg" width="100%" height="100%"></li>
        <li><img src="images/16.jpg" width="100%" height="100%"></li>
        <li><img src="images/17.jpg" width="100%" height="100%"></li>
        <li><img src="images/18.jpg" width="100%" height="100%"></li>
        <li><img src="images/19.jpg" width="100%" height="100%"></li>
        <li><img src="images/20.jpg" width="100%" height="100%"></li>
    </ul>
</div>
<div id="bg"></div>
<div id="bottom">
	<ul>
    	<li class="prev"></li>
        <li class="img"></li>
        <li class="next"></li>
        <li class="close"></li>
    </ul>
</div>
<div id="frame"></div>
</body>
</html>

JS代码(pic.js):

function getStyle(obj,attr){
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
window.onload = function(){
	var oBox = document.getElementById('box');
	var oBg = document.getElementById('bg');
	var oBot = document.getElementById('bottom');
	var aBli = oBot.getElementsByTagName('li');
	var oFrame = document.getElementById('frame');
	var aLi = oBox.getElementsByTagName('li');
	var aImg = oBox.getElementsByTagName('img');
	var i = iNow = 0;
	for(i=0;
	i<aLi.length;
	i++){
	aLi[i].index = i;
	aLi[i].onclick = function(){
	with(oFrame.style){
	display = 'block',top = this.offsetTop +'px',left = this.offsetLeft +'px',width = this.offsetWidth +'px',height = this.offsetHeight +'px';
}
oFrame.innerHTML = '<img src="images/'+(this.index + 1)+'.jpg" />';
	var oImg = oFrame.getElementsByTagName('img')[0];
	var iWidth = oImg.width;
	var iHeight = oImg.height;
	var iLeft = parseInt((document.documentElement.clientWidth / 2) - (iWidth /2));
	var iTop = parseInt((document.documentElement.clientHeight / 2) - (iHeight /2) - 50);
	with(oImg.style){
	height = width = '100%';
}
startMove(oFrame,{
	opacity:100,left:iLeft,top:iTop,width:iWidth,height:iHeight}
);
	oBg.style.display = 'block';
	oBot.style.display = 'block';
	iNow = this.index + 1;
}
;
}
document.onmousedown = function(){
	return false}
;
	aBli[0].onclick = function(){
	iNow--;
	if(iNow == 0)iNow = aLi.length;
	oFrame.innerHTML = '<img src="images/'+iNow+'.jpg" width="100%" height="100%" />';
}
;
	aBli[1].onclick = function(){
	oFrame.style.cursor = 'move';
	oFrame.onmousedown = function(e){
	var oEvent = e || event;
	var X = oEvent.clientX - oFrame.offsetLeft;
	var Y = oEvent.clientY - oFrame.offsetTop;
	document.onmousemove = function(e){
	var oEvent = e || event;
	var L = oEvent.clientX - X;
	var T = oEvent.clientY - Y;
	if(L < 0){
	L = 0;
}
else if(L > document.documentElement.clientWidth - oFrame.offsetWidth){
	L = document.documentElement.clientWidth - oFrame.offsetWidth}
if(T < 0){
	T = 0;
}
else if(T > document.documentElement.clientHeight - oFrame.offsetHeight){
	T = document.documentElement.clientHeight - oFrame.offsetHeight;
}
oFrame.style.left = L + 'px';
	oFrame.style.top = T + 'px';
	oFrame.style.margin = 0;
	return false;
}
document.onmouseup = function(){
	document.onmouseup = null;
	document.onmousemove = null;
}
;
	return false;
}
;
}
;
	aBli[2].onclick = function(){
	iNow++;
	if(iNow > aLi.length)iNow = 1;
	oFrame.innerHTML = '<img src="images/'+iNow+'.jpg" width="100%" height="100%" />';
}
;
	aBli[3].onclick = function(){
	startMove(oFrame,{
	opacity:0,left:aImg[iNow-1].offsetLeft,top:aImg[iNow-1].offsetTop,width:150,height:100}
,function(){
	oFrame.style.display = 'none';
	oBg.style.display = 'none';
	oBot.style.display = 'none';
	oFrame.onmousedown = null;
	oFrame.style.cursor = 'auto';
}
);
}
;
}
;
	function startMove(obj,json,onEnd){
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
	doMove(obj,json,onEnd);
}
,30);
}
function doMove(obj,json,onEnd){
	var attr='';
	var bStop=true;
	for(attr in json){
	var iCur=0;
	if(attr=='opacity'){
	iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else{
	iCur=parseInt(getStyle(obj,attr));
}
var iSpeed=(json[attr]-iCur)/5;
	iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
	if(json[attr]!=iCur){
	bStop=false;
}
if(attr=='opacity'){
	obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
	obj.style.opacity=(iCur+iSpeed)/100;
}
else{
	obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop){
	clearInterval(obj.timer);
	if(onEnd){
	onEnd();
}
}
}

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
html,body{height:100%;margin:0px;padding:0px;background:#000;}
/* box */
.box{width:850px;height:auto;overflow:hidden;background:#666;margin:100px auto 10px auto;padding:10px 0 0 10px;}
.box ul{margin:0px;padding:0px;float:left;}
.box li{width:150px;height:100px;float:left;cursor:pointer;display:inline;margin:0 10px 10px 0;border:5px solid #333;}
#bg{width:100%;height:100%;position:absolute;left:0px;top:0px;background:#000;filter:alpha(opacity:50);opacity:0.5;display:none;}
#bottom{width:215px;height:50px;position:absolute;left:50%;bottom:0px;margin:0 0 0 -107px;border:1px solid #232323;background:#444;padding:1px;z-index:1;display:none;}
#bottom ul{width:100%;height:100%;margin:0px;padding:0px;list-style-type:none;background:#000;}
#bottom li{background:url(../images/ico.jpg) no-repeat;float:left;display:inline;margin:8px 0 0 18px;cursor:pointer;}
#bottom li.prev{width:30px;height:33px;background-position:0 0;}
#bottom li.next{width:30px;height:33px;background-position:-35px 0;}
#bottom li.img{width:30px;height:33px;background-position:-106px 0;}
#bottom li.close{width:31px;height:33px;background-position:-70px 0;}
#frame{background:#fff;padding:3px;position:absolute;z-index:2;display:none;filter:alpha(opacity:0);opacity:0;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)