JS实现简单的顶部定时关闭层效果

代码如下:

<script type="text/javascript">
var time = 300;
var h = 0;
function addCount()
{
if(time>0)
{
time--;
h = h+5;
}
else
{
return;
}
if(h>300) //高度
{
return;
}
document.getElementById("ads").style.display = "";
document.getElementById("ads").style.height = h+"px";
setTimeout("addCount()",30);
}
window.onload = function showAds()
{
addCount();
setTimeout("noneAds()",7000); //停留时间自己调了
}
var T = 300;
var N = 300; //高度
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.height = N+"px";
setTimeout("noneAds()",30);
}
</script>

代码如下:

<div style="MARGIN: 0px auto; WIDTH: 900px; BACKGROUND: #369; HEIGHT: 300px; COLOR: #fff" id="ads">我们_www.jb51.net</div>

赞 (0)

相关推荐

  • JS+CSS实现Div弹出窗口同时背景变暗的方法

    本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现的Div弹出窗口,同时背景变暗</title> <script>     function    locking(){      document.all.ly.style.display="block";      document.all.

  • js控制div弹出层实现方法

    本文实例讲述了js控制div弹出层实现方法.分享给大家供大家参考.具体分析如下: 这是个功能很好,且容易调用和控制的弹出层.感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口(可拖动,背景灰色透明)</title&g

  • js操作css属性实现div层展开关闭效果的方法

    本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

  • JS实现定时自动关闭DIV层提示框的方法

    本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

  • js实现的定时关闭页面或定时提醒效果代码

    v\:*{behavior:url(#default#vml)} v\:oval,#oDiv{position=absolute;width=200;height=200} #stay{position=absolute;top=70;left=59;color=RED;padding=6;font=900 20/1.3} #input input{border-left=0;border-right=0} Cool Clock 9?'':'_')+per+'%'" style=position

  • JS定时关闭窗口的实例

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type ="text/css" >    .main{ background-color:Silver; width :200px; height :100px; margin-

  • 等待指定时间后自动跳转或关闭当前页面的js代码

    复制代码 代码如下: //指定时间之后跳转 <script language="javascript"> function go( ) {//定义函数 window.location="main.html";//页面跳转 } window.setTimeout("go()",1000);//1秒后执行函数go </script> //指定时间之后自动关闭 <script type="text/javascr

  • js实现点击按钮后给Div图层设置随机背景颜色的方法

    本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>js设置随机颜色 <

  • JS实现简单的顶部定时关闭层效果

    复制代码 代码如下: <script type="text/javascript"> var time = 300; var h = 0; function addCount() { if(time>0) { time--; h = h+5; } else { return; } if(h>300) //高度 { return; } document.getElementById("ads").style.display = "&q

  • JS简单实现动画弹出层效果

    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>动画弹出层&l

  • jquery实现简单实用的弹出层效果代码

    jquery实现简单实用的弹出层效果代码

    本文实例讲述了jquery实现简单实用的弹出层效果.分享给大家供大家参考.具体如下: 目前来说,我还是喜欢这个自己改造的弹出层,在项目中用的也是这个.引入了新版的jquery插件,方框及文字都可以自己定义,非常方便,希望大家也喜欢这款弹出层,JavaScript在本例中也充分发挥了作用,对学习JS也是不错的参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ 具体代码如下: <!D

  • JS+DIV实现鼠标划过切换层效果的方法

    本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>DIV层切换</title> <script language="JavaScript" type="text/javascript"> /********************************************* 功能: 通用DIV切换函数 参数: d

  • js实现简单的省市县三级联动效果实例

    本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: js代码部分 //省市县数据格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县

  • JS实现自动固定顶部的悬浮菜单栏效果

    JS实现自动固定顶部的悬浮菜单栏效果

    本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • js实现简单的左右两边固定广告效果实例

    本文实例讲述了js实现简单的左右两边固定广告效果的方法.分享给大家供大家参考.具体分析如下: 大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的代码,可能在ie下滚动的时候会有一点抖动,这个问题以后再解决了,先实现再说. 要点一: var adtop = adleft.offsetTop; 获得元素距离上边的位置,在滚动的时候需要用到. 要点二: 复制代码 代码如下: adleft.style.top=adtop+(document.documentElement.scroll

  • 原生JS实现简单的无缝自动轮播效果

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的.现在记录一下今天复习的原生js无缝轮播吧. 先上一张自拍镇楼,哈哈哈 首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧 <div id="wrap"> <ul id="ul"

  • JS+DIV实现鼠标划过切换层效果的实例代码

    <style>/*栏目切换样式开始*/.none {display: none;}.block {display: block;}/*头部样式*/.s_c {width:800px;text-align: center;}.s_c ul{clear:both;margin:0;}.s_c li{list-style:none;float:left;position: relative;width: 70px;}/**/.c_0 {background-color: #CCCCCC;} /*隐藏

  • JS实现简单的右下角弹出提示窗口完整实例

    本文实例讲述了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"> <

随机推荐