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 $(document).ready() 与window.onload的区别
Dec 28 Javascript
javascript调试说明
Jun 07 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python框架django基础指南
2016/09/08 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python实现超级玛丽游戏
2020/03/18 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
最新大学生自我评价
2013/09/24 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
毕业生自荐书
2013/12/18 职场文书
迎元旦广播稿
2014/02/22 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
成绩单评语
2015/01/04 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers