内容文章页内图片放大功能
内容文章页内图片放大功能。先上效果（可点击啊）
代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html> <html> <head> <title>弹出层</title> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js" ></script> <style> *{margin:0;padding: 0} .article{width:700px;min-height: 1500px;margin: 0 auto;padding:10px;border: 1px solid #3C3F41;box-sizing: border-box;} .article img{width: 100;height:200px;} /*弹层样式*/ .big-image-window{display:none;width: 100%;height: 100%;background-color:rgba(0,0,0,.4);position:fixed;top:0;left: 0;z-index: 99999;} .big-image-image-warp{height:auto;width:auto;background: rgba(255,255,255,.8);padding:10px;position:fixed;border-radius: 10px;} .big-image-button{width: 40px;height: 40px;position:absolute;top:-25px;right:-25px;background-color: #fff;border-radius: 20px;text-align: center;font-size:12px;color:#FF7C00;line-height: 40px;cursor: pointer;-webkit-transition:-webkit-transform .5s,background .5s,color .5s;-moz-transition:-moz-transform .5s,background .5s,color .5s;transition:transform .5s,background .5s,color .5s;} .big-image-button:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background: #FF7C00;color: #fff;} .big-image-window img{height:auto;width:auto;} </style> <script> $(function(){ var $imgs = $(".article img").not($(".article a img")); //待显示图片集合 /* 弹层部分 */ var $bigWindow = $(".big-image-window");//弹出层 var $showDiv = $(".big-image-image-warp");//显示图层 var $closeBtn = $(".big-image-button");//关闭按钮 var $winImage = $("#big-image-window-image");//图片元素 var curIndex = 0;//元素索引 //图片点击 $imgs.click(function(){ var $cur,src; $cur = $(this); src = $cur.attr("src"); setSize(src,$showDiv,$winImage); $winImage.attr("src",src); curIndex = $imgs.index($cur); $bigWindow.show(); }); //切换图片 $winImage.click(function(){ var src; curIndex++; if(curIndex==$imgs.length) curIndex=0; src = $imgs.eq(curIndex).attr("src"); $winImage.attr("src",src); setSize(src,$showDiv,$winImage); }); //关闭弹层 $closeBtn.click(function(){ $bigWindow.hide(); }); }); //根据图片大小修改DIV大小 function setSize(src,resizeA,resizeB){ var img,imgWidth,imgHeight,maxWidth,maxHeight; if(document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth) { maxWidth = document.documentElement.clientWidth;//最大宽度 maxHeight = document.documentElement.clientHeight;//最大高度 }else{ maxWidth = 1000; maxHeight = 1000; } img = new Image(); img.src = src; imgWidth = parseInt(img.width)*1.1;//放大至原始宽度1.1倍 imgHeight =parseInt(img.height)*1.1;//放大至原始高度1.1倍 if(imgWidth>maxWidth) imgWidth = maxWidth*0.8; if(imgHeight>maxHeight) imgHeight = maxHeight*0.8; resizeA.width(imgWidth); resizeA.height(imgHeight); resizeA.css({"top":maxHeight/2-(imgHeight/2+20),"left":maxWidth/2-(imgWidth/2+20)}); resizeB.width(imgWidth); resizeB.height(imgHeight); } </script> </head> <body> <div class="article"> <img src="images/1.jpg"> <img src="images/2.jpg"> <a href="http://www.baidu.com" ><img src="images/3.jpg"></a> <img src="images/4.jpg"> <img src="images/5.jpg"> <hr /> <b>备注：不经过服务器环境打开时，Chrom等浏览器弹层图片不会显示</b> </div> <!--图片弹出层begin--> <div class="big-image-window"> <div class="big-image-image-warp"> <div class="big-image-button">关闭</div> <img src="images/1.jpg" id="big-image-window-image"> </div> <span id="xy" style="position: absolute;right:0;bottom:0;">dd</span> </div> <!--图片弹出层end--> </body> </html> |
百度网盘带走？http://pan.baidu.com/s/1bn5uKYN
请尊重我们的辛苦付出，未经允许，请不要转载 本站 的文章，鄙视各种无耻的采集行为！