JS实现的仿QQ空间图片弹出效果代码
本文实例讲述了JS实现的仿QQ空间图片弹出效果代码。分享给大家供大家参考，具体如下：
<scripttype="text/javascript">
functionimageShow(which_click){
varimage_path=which_click;
//alert(image_path);
vartag_top=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
//创建底层灰色DIV
varindex_tag=document.createElement("div");
index_tag.style.cssText="width:100%;height:"+Math.max(document.body.clientHeight,document.body.offsetHeight,document.documentElement.clientHeight)+"px;position:relative;background:black;top:0;filter:Alpha(Opacity=80);Opacity:0.8;";
document.body.appendChild(index_tag);
//index_tag.ondblclick=closeIndexTag;
index_tag.onclick=closeIndexTag;
//创建图片DIV
varimg_tag=document.createElement("div");
img_tag.style.cssText="font:12px/18pxverdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5pxsolidwhite;background:white;color:white;left:"+(parseInt(document.body.offsetWidth)/2-100)+"px;top:"+(document.documentElement.clientHeight/3+tag_top)+"px;";
img_tag.innerHTML="<divstyle='padding:10px;background:#cccccc;border:1pxsolidwhite'><imgsrc='images/loading.gif'/><br/><br/><bstyle='color:#999999;font-weight:normal'>Imageloading...</b><br/></div>";
img_tag.oncontextmenu=function(){
varclsOK=confirm("是否确定关闭图片显示");
if(clsOK)
closeIndexTag();
returnfalse;
}
img_tag.onclick=closeIndexTag;
//img_tag.onmousemove=barDidplay;
document.body.appendChild(img_tag);
//构建图片关闭按钮
varclose_tag=document.createElement("div");
close_tag.style.cssText="display:none;position:absolute;left:10px;top:10px;color:black;";
close_tag.innerHTML="<bstyle='background:none;border:0pxsolidwhite;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;'>关闭</b>";
close_tag.onclick=closeIndexTag;
varimg=newImage();
img.src=image_path;
img.style.cssText="border:1pxsolid#cccccc;filter:Alpha(Opacity=0);Opacity:0;cursor:pointer";
img.onload=imgOK();
functionimgOK(){
vartemp=0;
varstop_x=false;
varstop_y=false;
varimg_tag_x=img_tag.offsetWidth;
varimg_tag_y=img_tag.offsetHeight;
varimg_x=img.width;
varimg_y=img.height;
varscroll_x=document.documentElement.clientWidth;
varscroll_y=window.innerHeight||document.documentElement.clientHeight;
varyy=0;
varxx=0;
if(img_y>scroll_y||img_x>scroll_x){
yy=scroll_y-100;
xx=(img_x/img_y)*yy;
}else{
xx=img_x+4;
yy=img_y+3;
}
img.style.width=xx-4+'px';
img.style.height=yy-3+'px';
varmaxTime=setInterval(function(){
temp+=30;
if((img_tag_x+temp)<xx){
img_tag.style.width=(img_tag_x+temp)+"px";
img_tag.style.left=(scroll_x-img_tag_x-temp)/2+"px";
}else{
stop_x=true;
img_tag.style.width=xx+"px";
img_tag.style.left=(scroll_x-xx)/2+"px";
}
if((img_tag_y+temp)<yy){
img_tag.style.height=(img_tag_y+temp)+"px";
img_tag.style.top=(tag_top+(scroll_y-img_tag_y-temp)/2)+"px";
}else{
stop_y=true;
img_tag.style.height=yy+"px";
img_tag.style.top=(tag_top+(scroll_y-yy)/2)+"px";
}
if(stop_x&&stop_y){
clearInterval(maxTime);
img_tag.appendChild(img);
temp=0;
imgOpacity(temp);
}
},1);
img_tag.innerHTML="";
img_tag.appendChild(close_tag);
}
functioncloseIndexTag(){
document.body.removeChild(index_tag);
document.body.removeChild(img_tag);
}
functionimgOpacity(temp_imgOpacity){
vartemp=temp_imgOpacity;
temp+=10;
img.style.filter="alpha(opacity="+temp+")";
img.style.opacity=temp/100;
varimgTime=setTimeout(function(){imgOpacity(temp);},10);
if(temp>100)
clearTimeout(imgTime);
}
varbar_show;
functionbarDidplay(){
clearTimeout(bar_show);
close_tag.style.display="block";
bar_show=setTimeout(function(){close_tag.style.display="none"},1000);
}
}
</script>
html部分：
<aclass="add"href="javascript:;"onclick="imageShow('img/hn_bg.jpg')">
<span>图片效果</span>
</a>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。