jQuery实现点击查看大图并以弹框的形式居中
2019/6/27 22:13:05
本文主要是介绍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实现点击查看大图并以弹框的形式居中,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
这篇关于jQuery实现点击查看大图并以弹框的形式居中的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南