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 ...
随机推荐
- Hiho coder 1236 2015 北京网络赛 Score
五维偏序..一开始被吓到了,后来知道了一种BITSET分块的方法,感觉非常不错. 呆马: #include <iostream> #include <cstdio> #incl ...
- nodejs ejs 请求路径和静态资源文件路径
/XXX 会跳转到 http://域名:端口/XXX ./XXX 会跳转到 当前路径+/XXX XXX(../XXX) 会跳转到 当前路径父级+XXX
- Java使用DatagramSocket
转自:http://book.51cto.com/art/201203/322540.htm Java使用DatagramSocket代表UDP协议的Socket,DatagramSocket本身只是 ...
- mysql共享表空间转独立表空间
使用innodb_export_import.py脚本: https://github.com/thecpaneladmin/innodb-tools 安装MySQL-python模块: shell ...
- webpack配置技巧--路径
resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], ali ...
- android 悬浮覆盖状态栏的相关建议
WindowManager.LayoutParams.TYPE_SYSTEM_ERROR 显示在所有的应用之上包括显示在状态栏上,相对于TYPE_SYSTEM_OVERLAY不能获取焦点更为理想. 另 ...
- Webview组件和HTML的介绍
Deviceone平台并不是基于html5的跨平台开发工具.我们开发一个app都是使用原生的组件,但是在某些场景下html5也是非常好的选择,比如复杂的图文混排(类似新闻),比如报表chart之类用h ...
- sublime3添加对react代码检查
安装eslint npm install -g eslint npm install -g eslint-plugin-react 安装完后调用eslint --init 初始化,生成.eslintr ...
- install intel c/c++ compiler
通过在Intel官网上申请试用版本Intel® Parallel Studio XE Cluster Edition for Linux,会让你提交邮箱等信息,完成后会很快回复邮件,邮件会给出下载地址 ...
- USB OTG插入检测识别
转载请标注原文地址:http://blog.csdn.net/uranus_wm/article/details/9838847 一 USB引脚一般四根线,定义如下: 为支持OTG功能,mini/mi ...