Javascript特效：侧边广告

知识点

阻止冒泡：事件会产生冒泡现象，点击div会向完成不断传递，如果不阻止会触发外部有相同现象的函数。
```
if(event && event.stopPropagation){ // w3c标准event.stopPropagation();
}else{ // IE系列 IE 678event.cancelBubble = true;
}
```

实现居中

position: fixed;
left: 50%;
top: 50%;
transform: translate(高度一半,宽度一半);

运行效果

点击立即登录，弹出一个div（模拟登录界面），点击div外会关闭蒙版，点击div内部会进行跳转。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 3000px}#panel{width: 100%;height: 100%;background-color: #000;position: absolute;left: 0;top:0;opacity: .4;display: none;}#login{width: 300px;height: 300px;background-color: red;border-radius: 5px;position: fixed;left: 50%;top: 50%;transform: translate(-150px,-150px);display: none;}</style>
</head>
<body>
<button id="btn">立即登录</button>
<div id="panel"></div>
<div id="login"></div>
<script src="../MyTools/MyTools.js"></script>
<script>window.addEventListener('load',function (ev) {// 1. 监听按钮点击var addEventListener = myTool.$('btn').addEventListener('click',function () {// 阻止冒泡if(event && event.stopPropagation){ // w3c标准event.stopPropagation();}else{ // IE系列 IE 678event.cancelBubble = true;}// 1.1 显示面板和蒙版myTool.$('panel').style.display = 'block';myTool.$('login').style.display = 'block';// 1.2 隐藏滚动条document.body.style.overflow = 'hidden'});// 2. 监听文档点击document.addEventListener('click',function (ev1) {var e = ev1 || window.event;// 2.1 获取点击标签// 兼容设置 IE需要用srcElement获取标签var targetId = e.target ? e.target.id : e.srcElement.id;// 2.2 判断if (targetId !== 'login'){myTool.$('panel').style.display = 'none';myTool.$('login').style.display = 'none';document.body.style.overflow = 'auto'}else {window.location.href = 'https://blog.csdn.net/KaiSarH';}})},false)
</script>
</body>
</html>

Javascript特效：侧边广告相关推荐

前程无忧招聘网站特效制作(JavaScript特效)
招聘网站特效制作,实现如下功能: 1.网站首页 2.新用户注册 3.用户登录 4.简历管理:信息填写 5.职位搜索 6.招聘公司页面查看模板制作:网站底部做成模板,网站其他页面调用模板,模板用DIV ...
36个JavaScript特效教程，学完即精通
目录:36个JavaScript特效教程,学完即精通 ┣━━01 简版计算器(js版).mp4 ┣━━02 网页日历开发过程(js版).mp4 ┣━━03 正则表达式的编写思路(js版).mp4 ┣━ ...
Moo.fx 超级轻量级的 javascript 特效库
Moo.fx是一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用.它非常快.易于使用.跨浏览器.符合标准,提供控制和修改任何 ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
HTML5 和 JavaScript 特效
这篇文章向大家展示8个惊艳的 HTML5 和 JavaScript 特效.作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性,越来越多的开发人员开始使用 HTML5 来制作各种交互性强.效果 ...
用Javascript实现关闭广告案例
用Javascript实现关闭广告案例正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教我们在网页中经常可以看见烦人的小广告,并且广告的旁边通常会有一个特定的位置和图标来关闭这个 ...
HTML+CSS+JavaScript实现网页广告
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
Javascript特效之删除内容效果
Javascript特效之删除内容效果今天分享一个网页经常会用到的删除内容效果即想列表一样的每列数据实现单列删除效果. 效果图: 点击右上角的X后该内容会慢慢删除. 实现思路:实际上很简单,就是在该 ...
Javascript特效之可翻阅上一条下一条的动态文字
Javascript特效之可翻阅上一条下一条的动态文字我们经常会看到网站有一些自动跳动的新闻动态,今天来看看新闻动态怎么实现还有怎么手动选择上一条和下一条. 先来看看效果图: 点击箭头则会显示上一条 ...
javascript特效模拟marquee
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><script type ...

Javascript特效：侧边广告

知识点

运行效果

代码

Javascript特效：侧边广告相关推荐

最新文章

热门文章