jQuery实现点击查看大图并以弹框的形式居中


Posted in Javascript onAugust 08, 2016

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

Javascript 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
JS定时器实例
Apr 17 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
Vuex 入门教程
Jan 10 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 #Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 #Javascript
jQuery操作cookie
Aug 08 #Javascript
轮播图组件js代码
Aug 08 #Javascript
JavaScript面试开发常用的知识点总结
Aug 08 #Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 #Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 #Javascript
You might like
php 获取本地IP代码
2013/06/23 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
php中如何执行linux命令详解
2018/11/06 PHP
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python实现代码统计工具(终极篇)
2016/07/04 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
python实现学生通讯录管理系统
2021/02/25 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
小学教师师德感言
2014/02/10 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
2014政务公开实施方案
2014/02/19 职场文书
企业诚信承诺书
2014/05/23 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
学雷锋倡议书
2015/01/19 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
会议主持词通用版
2019/04/02 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS