仿QQ空间图案片展示效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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>仿QQ空间图案片展示效果</title>
<style type="text/css">
html, body {height:100%;margin:0px;padding:0px;background:url(http://zf4uc1.chinaw3.com/js/img/images/bg.jpg);}
.box {width:850px;height:auto;overflow:hidden;margin:30px auto;background:#666;padding:10px 0 0 10px;}
.box ul {margin:0px;padding:0px;float:left;list-style-type:none;}
.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(http://zf4uc1.chinaw3.com/js/img/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;}
</style>
<script type="text/javascript">
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="http://zf4uc1.chinaw3.com/js/img/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="http://zf4uc1.chinaw3.com/js/img/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="http://zf4uc1.chinaw3.com/js/img/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();
		}
	}
}
</script>
</head>
<body>
<div class="box" id="box">
	<ul>
    	<li><img src="http://zf4uc1.chinaw3.com/js/img/images/1.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/2.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/3.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/4.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/5.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/6.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/7.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/8.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/9.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/10.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/11.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/12.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/13.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/14.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/15.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/16.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/17.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/18.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/images/19.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com/js/img/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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

仿QQ空间图案片展示效果

分类

图片代码

描述

仿QQ空间图案片展示效果