下载鸥 > 网站下载 > 开发教程 > JS/JQuery

jQuery监听点击事件弹出关注二维码教程

353 2021-05-12 20:00:01

收藏
通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这个功能要怎么做。

jQuery监听点击事件弹出关注二维码教程

涉及到的知识点

jQuery、html、css相关知识。本教程展示包括jQuery、html、css在内的全部源码,可复制下来直接使用。
 

html源码

html源码是涉及到的元素,包括logo展示、关注按钮、二维码路径、关闭按钮,等等。
<div class="footer-fixed">
	<img src="/images/logo.png" alt="关注我们">
	<span class="words">关注我们</span>
	<span class="guanzhu">关注</span>
</div>

<div class="public-container">
	<div class="public-img">
		<img src="/images/public.jpg" alt="关注公众号">
		<span class="public-close">关闭</span>
	</div>
</div>
 

css源码

css源码决定了点击关注、弹出二维码、关闭按钮等元素的外观。此外,pc端不显示弹出与关注功能,仅在手机端展示
<style>
.footer-fixed{
	display:none
}
@media screen and (max-width:960px){
	.footer-fixed{
		display:block;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		background:#fff;
		line-height:60px;
		overflow: hidden;
		padding:14px 0;
	}
	.footer-fixed span.words{
		line-height:30px;
		float: left;
		color:#333;
		margin:0 0 0 10px;
	}
	.footer-fixed img{
		height:30px;
		float: left;
		margin:0 0 0 10px;
	}
	.footer-fixed .guanzhu{
		float: right;
		background:#e63d14;
		color:#fff;
		padding:0 20px;
		margin:0 10px 0 0;
		line-height:30px
	}
	.public-container{
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background:rgba(0,0,0,.7);
		display: none;
	}
	.public-container .public-img{
		max-width:80%;
		margin:20% auto;
		background:#fff;
		padding:0 0 20px 0;
		text-align: center;
	}
	.public-container img{
		max-width:100%;
		display:block;
	}
	.public-close{
		color:green;
		padding:10px;
	}
}
</style>
 

jQuery源码

jQuery源码控制点击事件、弹出事件、关闭事件等一系列涉及到交互的事件。
<script src="/js/jquery.min.js"></script>
<script>
$(function(){
	$('.guanzhu').click(function(){
		$(".public-container").show();
	})
	$('.public-close').click(function(){
		$(".public-container").hide();
	})
})
</script>
 

需要注意的点

需要注意,图片、js路径要全部换成可引用的路径,否则会出错。

本文地址:https://xzo.com.cn/develop/js/943.html

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
通过原生的JS实现点击复制效果
通过原生的JS实现点击复制效果

对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...

1 300
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 436
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 275
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 459
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1511
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1301
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 518
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 334
随机JS/JQuery开发教程
相对路径和绝对路径要如何选择?
相对路径和绝对路径要如何选择?

表示路径的方法有两种:相对路径,绝对路径。我们何时用相对路径,何时用绝对路径...

0 340
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 292
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 275
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 280
js怎样判断现在是早上中午还是晚上
js怎样判断现在是早上中午还是晚上

一些网站在会员中心开发了问候页,例如问候客户早上好、下午好、晚上好等等。...

0 441
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 265
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 291
js解除页面无法复制的问题
js解除页面无法复制的问题

很多网站不允许复制页面信息,这在日常浏览页面的过程中带来了诸多不便。我们...

0 269
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入