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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
bat和python批量重命名文件的实现代码
2016/05/19 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
nohup的用法
2014/08/10 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
法学院方阵解说词
2014/01/29 职场文书
争论的故事教学反思
2014/02/06 职场文书
微电影大赛策划方案
2014/06/05 职场文书
代领毕业证委托书
2014/08/02 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
工作证明书
2015/06/15 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书