JS实现:点击后,图片弹出放大,背景变黑的效果
2011-08-02 11:26
1221 查看
相关代码如下,其中,取得弹出大图的url,也可以写成(".jpg",".jpg"),实例化中,mode_right是所要获取的ID
显示代码
显示代码
<script type="text/javascript"> function ImgShow(evt){ var imgTag=(window.event)?event.srcElement:evt.target; var imgPath=imgTag.src.replace("abc.jpg",".jpg");//取得弹出的大图url var tagTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop); var tag=document.createElement("div"); tag.style.cssText="width:100%;height:"+Math.max(document.body.clientHeight,document.body.offsetHeight)+"px;position:absolute;background:white;top:0;filter: Alpha(Opacity=80);Opacity:0.8;"; var tagImg=document.createElement("div"); tagImg.style.cssText="font:12px /18px verdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid gray;background:gray;color:white;left:"+(parseInt(document.body.offsetWidth)/2-100)+"px;top:"+(document.documentElement.clientHeight/3+tagTop)+"px;" var closeTag=document.createElement("div"); closeTag.style.cssText="position:absolute;right:10px;bottom:10px;background:red;border:1px solid white;yellow:white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;"; closeTag.innerHTML="<img src='images/closelabel.gif'>"; closeTag.onclick=closes; document.body.appendChild(tag); document.body.appendChild(tagImg); var img=new Image(); img.src=imgPath; img.style.cssText="border:1px solid #cccccc;filter: Alpha(Opacity=0);Opacity:0;"; var barShow,imgTime; img.complete?ImgOK():img.onload=ImgOK; function ImgOK(){ var Stop1=false,Stop2=false,temp=0; var tx=tagImg.offsetWidth,ty=tagImg.offsetHeight; var ix=img.width,iy=img.height; var sx=document.documentElement.clientWidth,sy=Math.min(document.documentElement.clientHeight,document.body.clientHeight/*opera*/); var xx=ix>sx?sx-50:ix+4,yy=iy>sy?sy-50:iy+3; var maxTime=setInterval(function(){ temp+=35; if((tx+temp)<xx){ tagImg.style.width=(tx+temp)+"px"; tagImg.style.left=(sx-(tx+temp))/2+"px"; }else{ Stop1=true; tagImg.style.width=xx+"px"; tagImg.style.left=(sx-xx)/2+"px"; } if((ty+temp)<yy){ tagImg.style.height=(ty+temp)+"px"; tagImg.style.top=(tagTop+((sy-(ty+temp))/2))+"px"; }else{ Stop2=true; tagImg.style.height=yy+"px"; tagImg.style.top=(tagTop+((sy-yy)/2))+"px"; } if(Stop1&&Stop2){ clearInterval(maxTime); tagImg.appendChild(img); temp=0; imgOPacity(); } },1); function imgOPacity(){ temp+=10; img.style.filter="alpha(opacity="+temp+")"; img.style.opacity=temp/100; imgTime=setTimeout(imgOPacity,1) if(temp>100) clearTimeout(imgTime); } tagImg.innerHTML=""; tagImg.appendChild(closeTag); if(ix>xx||iy>yy){ img.alt="左键拖动,双击放大缩小"; img.ondblclick=function (){ if(tagImg.offsetWidth<img.offsetWidth||tagImg.offsetHeight<img.offsetHeight){ img.style.width="auto"; img.style.height="100%"; img.alt="双击可以放大"; img.onmousedown=null; closeTag.style.top="10px"; closeTag.style.left="10px"; tagImg.style.overflow="visible"; tagImg.style.width=img.offsetWidth+"px"; tagImg.style.left=((sx-img.offsetWidth)/2)+"px"; }else{ img.style.width=ix+"px"; img.style.height=iy+"px"; img.alt="双击可以缩小"; img.onmousedown=dragDown; tagImg.style.overflow="auto"; tagImg.style.width=xx+"px"; tagImg.style.left=((sx-xx)/2)+"px"; } } img.onmousedown=dragDown; tagImg.onmousemove=barHidden; tagImg.onmouseout=moveStop; document.onmouseup=moveStop; }else{ tagImg.style.overflow="visible"; tagImg.onmousemove=barHidden; } } function dragDown(a){ img.style.cursor="pointer"; var evts=a||window.event; var onx=evts.clientX,ony=evts.clientY; var sox=tagImg.scrollLeft,soy=tagImg.scrollTop; var sow=img.width+2-tagImg.clientWidth,soh=img.height+2-tagImg.clientHeight; var xxleft,yytop; document.onmousemove=function(e){ var evt=e||window.event; xxleft=sox-(evt.clientX-onx)<0?"0":sox-(evt.clientX-onx)>sow?sow:sox-(evt.clientX-onx); yytop=soy-(evt.clientY-ony)<0?"0":soy-(evt.clientY-ony)>soh?soh:soy-(evt.clientY-ony); tagImg.scrollTop=yytop; tagImg.scrollLeft=xxleft; closeTag.style.top=(yytop+10)+"px"; closeTag.style.left=(xxleft+10)+"px"; return false; } return false; } function barHidden(){ //clearTimeout(barShow); //if(closeTag.style.display=="none")closeTag.style.display="block"; //barShow=setTimeout(function(){closeTag.style.display="none";},2000); } function closes(){ document.body.removeChild(tag); document.body.removeChild(tagImg); clearTimeout(barShow); clearTimeout(imgTime); document.onmouseup=null; tag=img=tagImg=closeTag=null; } function moveStop(){ document.onmousemove=null; tagImg.onmousemove=barHidden; img.style.cursor="default"; } } </script> <script type="text/javascript">//实例化 var imgList1=document.getElementById("mode_right").getElementsByTagName("img"); for(var i in imgList1){ imgList1[i].onclick=ImgShow; } </script>
相关文章推荐
- js实现图片点击弹出放大效果(无插件)
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
- JS实现点击图片在当前页面放大并可关闭的漂亮效果
- js实现仿网易点击弹出提示同时背景变暗效果
- DIV+JS+CSS实现点击弹出图片效果
- 使用lightbox插件实现js点击图片放大并能关闭的效果
- JS实现点击图片在当前页面放大并可关闭的漂亮效果
- JS实现点击图片在当前页面放大的漂亮效果
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- js实现仿网易点击弹出提示同时背景变暗效果
- 利用JS实现图片放大效果
- js实现图片的放大效果
- js点击图片放大效果ImageZoom代码下载
- 实现当点击一张图片的时候,图片会放大,再点击图片的背景的时候,图片会缩放回去
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)
- android图片按钮点击变灰变量效果实现(一张背景图实现效果)
- JS实现点击某张图片弹出上传图片窗口以及限制图片格式和大小
- Js实现点击超链接弹出层,效果仿Discuz登录!
- 点击图片缩略图放大展示效果的实现