发布于 2017-03-10 01:26:33 | 123 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


这篇文章主要介绍了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实现点击查看大图并以弹框的形式居中,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持!



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务