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 this用法小结
Dec 19 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
深入浅析React中diff算法
May 19 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动态创建Flash动画
2006/10/09 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php 将excel导入mysql
2009/11/09 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
教师绩效工资方案
2014/02/01 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
公司处罚决定书
2015/06/24 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python