没有合适的资源?快使用搜索试试~ 我知道了~
QQ空间相册展示
3星 · 超过75%的资源 需积分: 10 124 下载量 29 浏览量
2012-07-24
09:19:14
上传
评论
收藏 8KB TXT 举报
温馨提示
试读
7页
QQ空间相册展示
资源推荐
资源详情
资源评论
<!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/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/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');
<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/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/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/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/img/images/'+iNow+'.jpg" width="100%" height="100%" />';
};
aBli[1].onclick = function(){
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/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/img/images/'+iNow+'.jpg" width="100%" height="100%" />';
};
aBli[1].onclick = function(){
剩余6页未读,继续阅读
资源评论
- xcoreu2013-03-27不能用了。
- smilecola2014-07-09不能用的啊
gagamatch
- 粉丝: 5
- 资源: 104
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功