javascript实现右下角广告框效果


Posted in Javascript onFebruary 01, 2017

本文教大家用原生js实现的简单网页主页右下角的广告框效果,利用好绝对定位,点击X关闭广告,里面的内容不管动图或者视频都可以。

代码最简洁,js行为优化版,复制粘贴即可使用。 

演示部分

javascript实现右下角广告框效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>右下角广告框效果</title>
</head>
<style type="text/css">
  #advbox{
    width: 400px;
    height: 300px;
    position: fixed;
    right: 0;
    bottom: 0;
  }
  .adv{
    width: 380px;
    height: 270px;
    border: 1px solid #a00;
    position: relative;
  }
  #icon{
    display: block;
    width: 24px;
    height: 24px;
    color: #0c0;
    font-size: 30px;
    font-weight: bolder;
    position: absolute;
    right: 2px;
    top: 2px;
    cursor: pointer;
  }
  #resetadv{
    width: 105px;
    height:20px;
    position: fixed;
    right: 25px;
    bottom: 15px;
    color: #fff;
    font-size: 20px;
    background-color: #333;
  }
  .hide{
    display: none;
  }
  .show{
    display: block;
  }
</style>
<body>
  <div id="advbox">
    <div class="adv">
    <img src="" alt="结合html5,这可以是一个gif,swf或者video">
    <span id="icon">X</span>
    </div>
  </div>
  <div id="resetadv">广告入口>></div>

<script type="text/javascript">
  (function(){
      //封装一下dom的id操作
      var $ = function(id){
        return document.getElementById(id);
      };
      //添加点击事件
      $("icon").onclick=function(){
        $("advbox").className = "hide";
      };
      $("resetadv").onmouseover=function(){
        $("advbox").className = "show";
      };
  })();
</script>  
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
react 创建单例组件的方法
Apr 26 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
基于javascript实现最简单选项卡切换
Feb 01 #Javascript
快速实现jQuery多级菜单效果
Feb 01 #Javascript
angular实现商品筛选功能
Feb 01 #Javascript
Bootstarp基本模版学习教程
Feb 01 #Javascript
angular实现表单验证及提交功能
Feb 01 #Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 #Javascript
Javascript基础回顾之(二) js作用域
Jan 31 #Javascript
You might like
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
javascript模拟命名空间
2015/04/17 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
requireJS使用指南
2016/04/27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python yield 使用方法浅析
2017/05/20 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
详解Python3注释知识点
2019/02/19 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python sorted函数原理解析及练习
2020/02/10 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
学生会主席就职演讲稿
2014/01/14 职场文书
七年级历史教学反思
2014/02/05 职场文书
教师党员承诺书
2014/03/25 职场文书
演讲比赛策划方案
2014/06/11 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript