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 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
js new Date()实例测试
Oct 31 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
在webstorm中配置less的方法详解
Sep 25 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
Python实现滑雪小游戏
2021/09/25 Python