jquery点击按钮弹出图片
<!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点击按钮弹出图片的更多相关文章
- jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
- ExtJs 4.2.1 点击按钮弹出表单的窗口
初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用
请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...
- Html : 点击按钮弹出输入框,再次点击进行隐藏
上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- jQuery第三课 点击按钮 弹出层div效果
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
- 点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- ASP.NET点击按钮弹出确认对话框方法
开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...
- Asp.net点击按钮弹出文件夹选择框的实现(网页)
本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...
随机推荐
- Math.min() Math.max() Math.min().apply() Math.max() .apply()该如何使用???
Math.min()和 Math.max() 语法: Math.min(x,y) Math.max(x,y) 虽然能取到最小值和最大值,但是不支持数组. 那么如何计算数组中的大小值呢???????? ...
- Java——常用类(Math)
[常用方法] 这些方法为静态方法.
- kohana附件上传
try { $upload = Uploader::factory('Picture', $_FILES['Filedata'])->execute();}catch (Exception $e ...
- D - Cheerleaders(第三周)
D - Cheerleaders 题目链接:https://vjudge.net/contest/154063#problem/D 题目大意: 给你一个 n∗m 的方格,现在有 k 个相同石子,我们要 ...
- es之过滤器
我们已经介绍了如何使用不同的条件查询来构建查询并搜索数据.我们还熟知了评分,它告诉我们在给定的查询中,哪些文档更重要以及查询文本如何影响排序.然而,有时我们可能要在不影响最后分数的情况下,选择索引中的 ...
- error: ‘xxx’ does not name a type
error: ‘TPlanMgr’ does not name a type 两个头文件相互应用会导致一个头文件你的类型无定义问题.
- Matlab 中 函数circshift()的用法
a = [ ; ; ]; b = [- - -; - - -;- - -]; c = [ ; ; ]; Hist(:,:,) = a; Hist(:,:,) = b; Hist(:,:,) = c; ...
- Ta还没有分享呢,过段时间再来看看吧~ 解决办法
自己摸索出来的.只能查看以前分享的奥. 找到要查看用户的id号 利用特百度搜索工具实现检索 http://www.tebaidu.com/user--1.html 将红字部分替换为刚才复制的u ...
- PHP会话
B/S请求响应模式是无状态的.任意的请求间不存在任何的联系,不能将请求状态保持下去. 会话技术可以给每个浏览器分配持久数据,这些数据不会随着一次请求和相应结束而销毁. COOKIE cookie是一种 ...
- python-网络编程requests模块
urllib模块去请求的确比较麻烦,需要不断的encode和decode:而requests模块就比较方便了,它是基于requests模块开发的第三方模块,安装简单只需要 pip install r ...