jq点击小图 弹出大图(更新版)
$(function(){
$(".fj1-consult").on("click",function(){
//设置弹框中图片的路径
$(".layer_con img").attr("src","images/dx03.png");
layer($(this));
});
function layer(small){
$(".layer_con img").on("load",function(){
var $con=$(".layer_con").height()+30;
$(".layer_bg").css({"display":"block"});
var $winH=$(window).height();
if($con > $winH){
$(".layer_con").css({"height":$winH,"display":"block","top":"0","margin-top":"0"});
}else{
$(".layer_con").css({"display":"block","top":"50%","margin-top":-$con/2});
}
})
}
$(".close").on("click",function(){
$(this).parents(".layer_con").css("display","none");
$(".layer_bg").css("display","none");
});
})
<div class="layer_bg card-layerBg"></div>
<div class="layer_con card-layerCon">
<div class="layer_main card-layerM">
<img src=""/>
</div>
<div class="close">x</div>
</div>
.card-layerBg {
display: none;
width: 100%;
z-index:;
position: fixed;
background-color: #000;
opacity: 0.5;
top:;
height: 100%;
filter: alpha(opacity=50);
} .card-layerCon {
display: none;
width: 600px;
padding: 10px 30px 20px 0;
background-color: #fff;
z-index:;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
opacity:;
filter: alpha(opacity=100);
text-align:center;
} .close {
font-size: 33px;
text-align: center;
color: #ab2223;
position: absolute;
right: 10px;
top: -8px;
cursor: pointer;
} .card-layerM {
width: 100%;
margin: 0 auto;
padding: 10px;
padding-top: 25px;
overflow-y: auto;
max-height:100%;
text-align: center; }
.card-layerM img{
width:auto;
max-width:100%;
max-height:100%;
}
jq点击小图 弹出大图(更新版)的更多相关文章
- jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...
- jQuery点击图片弹出放大可拖动图片查看
CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...
- 3种jQuery弹出大图效果
本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...
- ExtJs 4.2.1 点击按钮弹出表单的窗口
初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- Android定位&地图&导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用
请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...
- Html : 点击按钮弹出输入框,再次点击进行隐藏
上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- Sql server 2008镜像配置步骤
下面主要是2008 MSSQL的一个镜像安装步骤,使用到的工具是mssql自带的Management Studio purpose : SQL SERVER 2008 mirror configura ...
- hbuilder的使用
今天在群里看群友提及了hbuilder,下载试了下,发现确实会有些代码敲起来方便多了.也帮助我自己发现uft8和保存的时候选择字符重要,不然乱码,很窝心.
- Java throws子句是怎么写的呢?
如果一个方法可以导致一个异常但不处理它,它必须指定这种行为以使方法的调用者可以保护它们自己而不发生异常.做到这点你可以在方法声明中包含一个throws子句.一个 throws 子句列举了一个方法可能抛 ...
- django 其他地址访问不了问题
启动的时候 使用 python manage.py runserver 0.0.0.0:8000 即可接收所有IP访问
- PhpStorm创建Drupal模块项目开发教程(3)
rush是 Drupal的脚本界面,PhpStorm的命令行工具支持Drush 5.8和更高版本. 接下来就Drush配置和基本操作进行设置,首先点击打开Settings | Command Line ...
- False 等效值
False 等效值 下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("&quo ...
- 转:Log4j使用
转:https://my.oschina.net/kkrgwbj/blog/638780 日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录. ...
- ReactiveCocoa的一些使用
作为一名iOS开发者, 你写的每一行代码几乎都是对某些事件的反馈:点击button.接收到网络信息. 一个属性的改变(通过KVO监测) 或者 通过CoreLocation监听用户所在位置的变化 以上等 ...
- Git使用指南(2)——工作区,暂存区,版本库
1 工作区修改添加到暂存区 git add 2 暂存区提交到版本库 git commit 3 版本库更新到暂存区 git reset HEAD 4 删除暂存区文件 git rm --cached< ...
- ExecutorService线程池应用
//线程数量 int threadNum = lists.size(); //创建一个线程池 ExecutorService pool = Executors.newFixedThreadPool(t ...