jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中
jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中,實現(xiàn)的關(guān)鍵代碼如下所示:
*{margin:0;padding:0;} .tab_bg{display:none;width:100%;height:100%;background:#282829;z-index:99;position:absolute;} .tab_img{width:100px;height:100px;margin:20px;} .tab_img img{width:100%;height:100%;} .bigImg{display:none;width:300px;height:300px;z-index:999;position:absolute;left:50%;margin-top:-150px;margin-left:-150px;} .bigImg img{width:100%;height:100%;} .close{display:none;width:20px;height:20px;border-radius:100%;border:1px solid #ccc;text-align:center;cursor:pointer;position:absolute;right:10px;top:10px;z-index:999;color:#fff} li{height:300px;}
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="tab_bg"> <div class="close">x</div> </div> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <table> <tr> <td>1</td> <td><div class="tab_img tab_img1"> <img src="2.jpg" alt=""/> </div></td> </tr> <tr> <td>2</td> <td><div class="tab_img tab_img2"> <img src="3.jpg" alt=""/> </div></td> </tr> <tr> <td>3</td> <td> <div class="tab_img tab_img3"> <img src="1.jpg" alt=""/> </div></td> </tr> </table> </body> </html>
var $height=$(window).height(); $(".tab_bg").height($height); function imgEnlarge(small){ $(small).on("click",function(){ var $big=document.createElement("div"); $($big).attr("class","bigImg"); $($big).appendTo($("body")); var $img=document.createElement("img"); $($img).attr("src",$(this).find("img").attr("src")); $($img).appendTo($big); $(this).css("display","none"); $(".tab_bg").css("display","block"); $(".close").css("display","block"); $($big).fadeIn(); $(window).bind("scroll",function(){return false}); var top1=$(window).scrollTop(); $(window).scrollTop(top1); $(".tab_bg").css("top",top1); $("body").css("overflow","hidden"); $(".bigImg").css("top",top1+$height/2); }); $(".close").on("click",function(){ $(this).css("display","none"); $(small).css("display","block"); $(".tab_bg").css("display","none"); $(".bigImg").css("display","none"); $("body").css("overflow","auto"); }) } $(".tab_img").each(function(){ imgEnlarge($(this)); })
以上所述是小編給大家介紹的jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應頁面布局
- 基于jquery的防止大圖片撐破頁面的實現(xiàn)代碼(立即縮放)
- jQuery+css實現(xiàn)的點擊圖片放大縮小預覽功能示例【圖片預覽 查看大圖】
- jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能【測試可用】
- jQuery實現(xiàn)鼠標滑過預覽圖片大圖效果的方法
- jQuery實現(xiàn)大圖輪播
- jQuery實現(xiàn)的小圖列表,大圖展示效果幻燈片示例
- jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果(附demo源碼下載)
- jQuery實現(xiàn)點擊小圖片淡入淡出顯示大圖片特效
- 基于jQuery插件實現(xiàn)點擊小圖顯示大圖效果
- jquery實現(xiàn)移動端點擊圖片查看大圖特效
- jQuery實現(xiàn)點擊小圖顯示大圖代碼分享
- jquery 圖片點擊放大預覽功能詳解
相關(guān)文章
jQuery實現(xiàn)使用sort方法對json數(shù)據(jù)排序的方法
這篇文章主要介紹了jQuery實現(xiàn)使用sort方法對json數(shù)據(jù)排序的方法,涉及jQuery基于ajax針對json格式文件數(shù)據(jù)的動態(tài)載入與排序相關(guān)操作技巧,需要的朋友可以參考下2018-04-04解析Jquery的LigerUI如何實現(xiàn)文件上傳
本篇文章是對Jquery中的LigerUI實現(xiàn)文件上傳的方法,進行了分析介紹,需要的朋友可以參考下2013-07-07Jquery中的CheckBox、RadioButton、DropDownList的取值賦值實現(xiàn)代碼
隨著Jquery的作用越來越大,使用的朋友也越來越多。在Web中,由于CheckBox、 Radiobutton 、 DropDownList等控件使用的頻率比較高,就關(guān)系到這些控件在Jquery中的操作問題2011-10-10jquery輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06Jquery Validation插件防止重復提交表單的解決方法
在項目開發(fā)中,測試人員報告缺陷說,即時有表單驗證,但是如果快速點擊兩下“提交”按鈕,系統(tǒng)會產(chǎn)生兩條相同的記錄。2010-03-03