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 CSS样式控制 学习笔记
Jul 23 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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
VFP与其他应用程序的集成
2006/10/09 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php通过字符串调用函数示例
2014/03/02 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
详解vue-cli 脚手架 安装
2019/04/16 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python写一个md5解密器示例
2018/02/23 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python 如何引入协程和原理分析
2020/11/30 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
易程科技软件测试笔试
2013/03/24 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
单位实习证明怎么写
2014/01/17 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang