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制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 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
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
php制作文本式留言板
2015/03/18 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
零基础php编程好学吗
2019/10/11 PHP
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
跟老齐学Python之网站的结构
2014/10/24 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Python 中的lambda函数介绍
2018/10/10 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python绘制汉诺塔
2021/03/01 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
联想C++笔试题
2012/06/13 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书