<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/jquery-3.4.1.min.js"></script>
<title>Document</title>

<style>
.bor{
border: 2px solid red;
width: 400px;
height: 200px;
text-align: center;
}
#main {
margin-top: 50px;
border: 1px solid black;
cursor: pointer;
padding: 30px;
}

#qrcode img {
position: absolute;
top: 50%;
left: 40%;
width: 300px;
height: 300px;
display: block;
}
#qrcode {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
z-index: 9999;
display: none;
}
</style>
</head>
<body>
<div class="bor">
<button class="main">点击此处 弹出你想要的</button>
<div class="qrcode">
<img class="image"  width="100%" height="100%" src="img/12.png">
</div>
</div>
<div class="bor">
<button class="main">点击此处 弹出你想要的</button>
<div class="qrcode">
<img class="image"  width="100%" height="100%" src="img/12.png">
</div>
</div>

<script>
//当本页面有两个按钮点击事件的时候，不适合用id（因为id是唯一的），需要把id换为class，最为简单的修改方法；
// 这样才会是实现你想要的效果，点击按钮弹出图片

$(function() {
$(".main").click(function() {
$(".qrcode").fadeIn("slow");
});
$(".qrcode").click(function() {
$(".qrcode").fadeOut("slow");
})
});

//该段代码适合本页面只有一个按钮点击
$(function() {
$("#main").click(function() {
$("#qrcode").fadeIn("slow");
});
$("#qrcode").click(function() {
$("#qrcode").fadeOut("slow");
})
});

</script>
</body>
</html>

以上是运用jquery里面的fade()函数写的点击事件。

 

下面这个是用传统的onclick写出来的，有一点点小问题，刚开始是有效的，今天重新写出来之后不知道为什么没效果了，大家可以帮我看下，我也发布出来

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/jquery-3.4.1.min.js"></script>
<title>Document</title>

<style>
.bor{
border: 2px solid red;
width: 400px;
height: 200px;
text-align: center;
}
#main {
margin-top: 50px;
border: 1px solid black;
cursor: pointer;
padding: 30px;
}

#qrcode img {
position: absolute;
top: 50%;
left: 40%;
width: 300px;
height: 300px;
display: block;
}
#qrcode {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
z-index: 9999;
display: none;
}
</style>
</head>
<body>
<div class="bor">
<button id="main">点击此处 弹出你想要的</button>
<div id="qrcode">
<img id="image" onclick="test(this)" width="100%" height="100%" src="img/12.png">
</div>
</div>
<div class="bor">
<button id="main">点击此处 弹出你想要的</button>
<div id="qrcode">
<img id="image" onclick="test(this)" width="100%" height="100%" src="img/12.png">
</div>
</div>

<script>

// 传统的方法来写，onclick

function test(obj){
console.log("11111")
$(obj).next().fadeIn("slow");
$(obj).next().click(function() {
$(this).fadeOut("slow");
})
var hh = $(obj).next().html();
console.log(hh)
}

</script>
</body>
</html>

jquery点击按钮弹出图片的更多相关文章

  1. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  2. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  3. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  4. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  5. Html ： 点击按钮弹出输入框，再次点击进行隐藏

    上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  7. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  8. ASP.NET点击按钮弹出确认对话框方法

    开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...

  9. Asp.net点击按钮弹出文件夹选择框的实现（网页）

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

随机推荐

  1. 文件/大文件上传功能实现(JS+PHP)全过程

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  2. 运输计划noip

    靠!这道题TM搞了我好几天,真是烦死人!!!早上打了一个倍增的TM只有95分QAQ... 然后一气之下开始不断卡常,各种玄学优化,可是就是T..TAT.. 可恶!晚上我就直接打了个tarjan,还好跑 ...

  3. 【bzoj1336/1337/2823】最小圆覆盖

    题目描述: 给出平面上N个点,请求出一个半径最小的圆覆盖住所有的点 输入: 第一行给出数字N,现在N行,每行两个实数x,y表示其坐标. 输出: 输出最小半径,输出保留三位小数. 样例输入: 4 1 0 ...

  4. APK文件结构和安装过程

    APK文件结构Android应用是用Java编写的,利用Android SDK编译代码,并且把所有的数据和资源文件打包成一个APK (Android Package)文件,这是一个后缀名为.apk的压 ...

  5. httpscan 爬虫式的网段Web主机发现小工具

    httpscan是一个扫描指定网段的Web主机的小工具.和端口扫描器不一样,httpscan是以爬虫的方式进行Web主机发现,因此相对来说不容易被防火墙拦截.httpscan会返回IP http状态码 ...

  6. React-Native 之 GD （五）属性声明和属性确认 及 占位图

    1.在 React-Native 创建的自定义组件是可以复用的,而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件,为了让开发人员之间减少沟通成本,我们会对某些必要的属性进行属性声明,让 ...

  7. Linux安装nslookup命令

    做DNS的人都知道nslookup命令是做什么用的,windows系统自带的.但是linux系统是不自带这个命令的,需要人手动安装.如果您不记得这是哪个软件包提供这个命令的话,那您还真会有些麻烦了.下 ...

  8. 【tensorflow使用笔记二】：tensorflow中input_data.py代码有问题的解决方法

    由于input_data网页打不开,因此从博客找到代码copy: https://blog.csdn.net/weixin_43159628/article/details/83241345 将代码放 ...

  9. 012-elasticsearch5.4.3【五】-搜索API【一】搜索匹配所有matchAllQuery、全文查询[matchQuery、multiMatchQuery、commonTermsQuery、queryStringQuery、simpleQueryStringQuery]

    一.概述 查询所使用的 QueryBuilders来源于以下 import static org.elasticsearch.index.query.QueryBuilders.*; 请注意,您可以使 ...

  10. 《图解设计模式》读书笔记8-3 STATE模式

    目录 State模式 示例程序 实现的功能 不使用&使用状态模式对比 示例程序的类图 代码 角色和类图 角色 类图 拓展思路 分而治之 依赖于状态的处理 谁来管理状态迁移 易于增加新状态 实例 ...