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 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
python获得一个月有多少天的方法
2015/06/04 Python
python实现聊天小程序
2018/03/13 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
DataReader和DataSet的异同
2014/12/31 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
英语课外活动总结
2014/08/27 职场文书
企业投资意向书
2015/05/09 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
法人代表资格证明书
2015/06/18 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python