jQuery实现广告弹窗
首先设置一个固定的窗口位于右下角,效果如下:
代码:
jQuery实现广告弹窗.html
之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现广告弹窗</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style type="text/css" > #ad{
width: 300px;
height: 300px;
background-color: antiquewhite;
position: fixed;
bottom: 0;
right: 0;
display: none;
}
</style>
<script type="text/javascript"> setTimeout(function(){
$("#ad").show(); },3000);//3秒之后就显示 setTimeout(function(){
$("#ad").hide(); },5000);//5秒之后就隐藏 </script>
</head>
<body>
<div id="ad">
<button>关闭</button> </div> </body>
</html>
实现3秒自动显示 5秒自动隐藏.html
最后通过代码实现点击事件,最终效果如下:
实现通过代码实现点击事件核心代码:
jQuery:
$(function(){
$("#closeBtn").click(function(){
$("#ad").hide();
});
});
html:
<button id="closeBtn">关闭</button>
最终所有的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现广告弹窗</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style type="text/css" > #ad{
width: 300px;
height: 300px;
background-color: antiquewhite;
position: fixed;
bottom: 0;
right: 0;
display: none;
}
</style>
<script type="text/javascript"> setTimeout(function(){
$("#ad").show(); },3000);//3秒之后就显示 setTimeout(function(){
$("#ad").hide(); },5000);//5秒之后就隐藏
$(function(){
$("#closeBtn").click(function(){
$("#ad").hide();
});
}); </script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button> </div> </body>
</html>
jQuery实现广告弹窗.html
通过另一种方式执行点击事件来进行窗口的显示与隐藏:
另一种方式执行点击事件来进行窗口的显示与隐藏的核心代码:
setTimeout(function(){
$("#ad").toggle()
},1000);
$(function(){
$("#closeBtn").click(function(){
$("#ad").toggle();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现广告弹窗</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style type="text/css" > #ad{
width: 300px;
height: 300px;
background-color: antiquewhite;
position: fixed;
bottom: 0;
right: 0;
display: none;
}
</style>
<script type="text/javascript"> // setTimeout(function(){
// $("#ad").show();
//
// },3000);//3秒之后就显示
//
// setTimeout(function(){
// $("#ad").hide();
//
// },5000);//5秒之后就隐藏
// $(function(){
// $("#closeBtn").click(function(){
// $("#ad").hide();
// });
// }); setTimeout(function(){
$("#ad").toggle()
},1000);
$(function(){
$("#closeBtn").click(function(){
$("#ad").toggle();
});
}); </script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button> </div> </body>
</html>
通过toggle实现弹窗.html
当然也可以实现窗口进行动画的显示:
有这样的几个参数:slow fast 毫秒数(速度)
show() //相当于 display:block
第一个参数slow fast 毫秒数(速度)
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示
参数slow的效果:
参数fast比参数slow快,效果如下:
参数 毫秒数(速度)自定义 例如:3秒,效果如下:
jQuery实现广告弹窗的更多相关文章
- jquery.cookie广告弹窗点击关闭后一天弹一次
jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- JQ广告弹窗&随机抽奖————JQ
1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...
- JQuery实现广告效果(滚动切换)
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- js广告弹窗
生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告.有的同事甚至都下一个屏蔽广告插件到浏览器上.这样就防止了广告的干扰. 但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原 ...
- jQuery手风琴广告展示插件
效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...
- jQuery的dialog弹窗实现
jQuery实现dialog弹窗: html代码如下: <input type="button" onclick="performances();" va ...
- JQuery漂浮广告代码
<!doctype html><html><head><meta charset="utf-8"><title>jque ...
- 原生Js_实现广告弹窗
广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- 亲爱的,我是一条Linux运维技术学习路径呀。
根据我的经验,人在年轻时,最头疼的一件事就是决定自己这一生要做什么.在这方面,我倒没有什么具体的建议:干什么都可以,但最好不要写小说,这是和我抢饭碗.总而言之,干什么都是好的:但要干出个样子来,这才是 ...
- Asp.net Core认证和授权:Cookie认证
关于asp.net core 的文章,博客园已经有很多大牛写过了. 这里我只是记录下自己在学习中的点滴和一些不懂的地方 Cookie一般是用户网站授权,当用户访问需要授权(authorization) ...
- sqli-labs(十)(过滤注释符)
第二十三关: 这关还是一个GET型.字符串.单引符号.的有报错的sql注入,输入?id=1' ,页面会报错 我们继续按照之前的套路来,先输入?id=1' or '1'='1 页面正常显示,说明这个地 ...
- Python底层库的函数中from __future__ import absolute_import的作用
在查看TensorFlow的底层优化器时候看到from __future__ import absolute_import 查找相关资料后发现 这个语句的意思是加入绝对引用的特征 直白的意思是,比如: ...
- 区别JS中类的静态方法,静态变量,实例方法,实例变量
1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 BaseClass.add = function() { cons ...
- CALL与retn
一.CALL 例如: 004013D9 CALL 00401C4C //ESP = 0060F9C8 004013DE 相当于 sub esp,0x4; //ESP = 0060F9 ...
- 斯坦福大学自然语言处理第四课“语言模型(Language Modeling)”
http://52opencourse.com/111/斯坦福大学自然语言处理第四课-语言模型(language-modeling) 一.课程介绍 斯坦福大学于2012年3月在Coursera启动了在 ...
- sitecore系统教程之架构概述
Sitecore体验数据库(xDB)从实时大数据存储库中的所有通道源收集所有客户交互.它连接交互数据,为每个客户创建全面,统一的视图,并使营销人员可以使用数据来管理客户的实时体验. xDB架构非常灵活 ...
- Running tests on PyCharm using Robot Framework
问题: I started using PyCharm with the robot framework, but i'm facing an issue. how can i run my test ...
- Python -- print(dataframe)时,省略部分列。
import pandas as pd # 导入后加入以下列,再显示时显示完全. pd.set_option('display.max_rows',500) pd.set_option('displa ...