仿QQ空间黑色图片展示，上下一张，关闭按钮

发布时间：2018-08-18 10:10:14 所属栏目：编程来源：站长网

导读：仿QQ空间黑色图片展示效果，这是作者起的名字，其实烈火小编觉得这更像是一些门户网站的图片频道图片新闻展示效果，点击缩略图后动态弹出大图上，下边还有上一张、下一张按和关闭按钮，如此强大的效果竟然都是 Java Script实现的，并没有借助 jQuery 代码

　　仿QQ空间黑色图片展示效果，这是作者起的名字，其实烈火小编觉得这更像是一些门户网站的图片频道图片新闻展示效果，点击缩略图后动态弹出大图上，下边还有上一张、下一张按和关闭按钮，如此强大的效果竟然都是JavaScript实现的，并没有借助jQuery代码。

　　示例：

<!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=gbk" /> <title>仿QQ空间图案片展示效果</title> <style type="text/css"> html, body {height:100%;margin:0px;padding:0px;background:url(/uploads/allimg/1109/qqimg_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(/uploads/allimg/1109/qqimg_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="/uploads/allimg/1109/qqimg_'+(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="/uploads/allimg/1109/qqimg_'+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="/uploads/allimg/1109/qqimg_'+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(); } } } // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ </script> </head> <body> <div class="box" id="box"> <ul> <li><img src="/uploads/allimg/1109/qqimg_1.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_2.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_3.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_4.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_5.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_6.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_7.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_8.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_9.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_10.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_11.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_12.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_13.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_14.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_15.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_16.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_17.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_18.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_19.jpg" width="100%" height="100%"></li> <li><img src="/uploads/allimg/1109/qqimg_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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

把not in 更换成not e	mydumper工具运用介绍
别花冤枉钱买专栏了！	Mysql索引类型创建错误