首頁 > 開發者 > JavaScript

jQuery實現點擊查看大圖並以彈框的形式置中，jquery點擊查看

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery實現點擊查看大圖並以彈框的形式置中，jquery點擊查看

jQuery實現點擊查看大圖並以彈框的形式置中，實現的關鍵代碼如下所示：

*{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實現點擊查看大圖並以彈框的形式置中，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More