js实现网页右上角滑出会自动消失大幅广告的方法


Posted in Javascript onFebruary 27, 2015

本文实例讲述了js实现网页右上角滑出会自动消失大幅广告的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>js网页右上角滑出会自动消失的大幅广告效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<script type="text/javascript" language="javascript">

var time = 500;

var w = 0;

function addCount()

{

if(time>0)

{

time--;

w = w+5;

}

else

{

return;

}

if(w>278)//宽度

{

return;

}

document.getElementById("ads").style.display = "";

document.getElementById("ads").style.width = w+"px";

setTimeout("addCount()",30); 

}

window.onload = function showAds()

{

addCount();

setTimeout("noneAds()",3000);//停留时间

}

</script>

<script type="text/javascript" language="javascript">

var T = 198;

var N = 188;//高度

function noneAds()

{

if(T>0)

{

T--;

N = N-5;

}

else

{

return;

}

if(N<0)

{

document.getElementById("ads").style.display = "none";

return;

}

document.getElementById("ads").style.width = N+"px";

setTimeout("noneAds()",30); 

}

</script>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div id="ads" style="margin:auto;display:none;position:absolute;width:200px;top:0px;right:0;height:200px;background-color:#d5282e;overflow:hidden;text-align:center;"><p align="center">欢迎访问 <a href="https://3water.com" target="_blank">三水点靠木</a>丨 该特效收集于互联网,只为兴趣,不作商业用途。</p>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 #Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 #Javascript
Javascript writable特性介绍
Feb 27 #Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 #Javascript
JavaScript函数详解
Feb 27 #Javascript
浅谈JavaScript的事件
Feb 27 #Javascript
JS实现图片放大镜效果的方法
Feb 27 #Javascript
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
深入解析php之apc
2013/05/15 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python 日期与时间转换的方法
2020/08/01 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
青春寄语大全
2014/04/09 职场文书
减负增效提质方案
2014/05/23 职场文书
同意迁入证明模板
2014/10/26 职场文书
质量整改通知单
2015/04/21 职场文书
2015年话务员工作总结
2015/04/29 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
Redis实现一个账号只能登录一个设备
2022/04/19 Redis