仿QQ空间图片展示效果

稿源：互联网 2022-04-02 21:40:00 点击： 34335 撤稿纠错

仿QQ空间图案片展示效果的一款网页特效，JS制作的效果，还不错。

以下讨论的是和QQ空间相关的仿QQ空间图片展示效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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[InstallDir_ChannelDir]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[InstallDir_ChannelDir]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[InstallDir_ChannelDir]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[InstallDir_ChannelDir]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[InstallDir_ChannelDir]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[InstallDir_ChannelDir]img/images/1.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/2.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/3.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/4.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/5.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/6.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/7.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/8.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/9.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/10.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/11.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/12.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/13.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/14.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/15.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/16.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/17.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/18.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]img/images/19.jpg" width="100%" height="100%"></li>
        <li><img src="http://zf4uc1.chinaw3.com[InstallDir_ChannelDir]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>

关于仿QQ空间图片展示效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011090873798.shtml方便下次再访问哦。

·上一篇： 鼠标移入及滑动移出时文字链接色彩产生渐变幻化的效果
·下一篇： 限制文本框的输入值类型的js特效代码

仿QQ空间图片展示效果

文章分类LIST >>返回首页

最新游戏

最新新闻