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 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 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常见漏洞攻击分析
2016/02/21 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python中数据库like模糊查询方式
2020/03/02 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
编辑求职信样本
2013/12/16 职场文书
电子商务自荐书范文
2014/01/04 职场文书
预备党员承诺书
2014/03/25 职场文书
中学生励志演讲稿
2014/04/26 职场文书
食堂标语大全
2014/06/11 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
初三毕业评语
2014/12/26 职场文书
公司财务部岗位职责
2015/04/14 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python