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

复制代码 代码如下:

<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>

时间: 2024-10-05 07:54:10

JS实现简单的顶部定时关闭层效果_javascript技巧的相关文章

JS简单实现动画弹出层效果_javascript技巧

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

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

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

JS实现可自定义大小,可双击关闭的弹出层效果_javascript技巧

本文实例讲述了JS实现可自定义大小,可双击关闭的弹出层效果.分享给大家供大家参考.具体如下: 这是一款JS弹出层,可自定义大小,双击关闭层,可以弹出500,300.500,500大小的窗口,窗口弹出后,在弹出窗口内双击即可关闭鼠标.我觉得挺不错的效果,可以学习到不少的JS知识. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-define-close-able-alert-dlg-demo/ 具体代码如下: <!DOCTYPE html>

JS实现简洁、全兼容的拖动层实例_javascript技巧

本文实例讲述了JS实现简洁.全兼容的拖动层.分享给大家供大家参考.具体分析如下: 这是一款最简洁的JS层拖动代码,全兼容ie.ff.opera.safari--每一种浏览器都有对应的判断和实现方法,你只需复制代码到你的网页中就可使用.水平高的朋友可以继续修改,添加更多方法,使其功能更强大. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

JS实现部分HTML固定页面顶部随屏滚动效果_javascript技巧

本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如

js实现仿Discuz文本框弹出层效果_javascript技巧

本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

JS实现简单的二维矩阵乘积运算_javascript技巧

本文实例讲述了JS实现简单的二维矩阵乘积运算方法.分享给大家供大家参考,具体如下: Console控制台截图如下: (上图为输出结果直接上代码了(A矩阵可以乘以B矩阵的前提是A矩阵的列数等于B矩阵的行数) <!DOCTYPE html> <html> <head> <title>demo</title> </head> <body> </body> <script type="text/java

JS实现超简单的仿QQ折叠菜单效果_javascript技巧

本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

JS实现简单的图书馆享元模式实例_javascript技巧

本文实例讲述了JS实现简单的图书馆享元模式.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <title>享员模式</title> </head> <body> <script> /* *flyweight 享员模式 */ //例子是一个图书馆存书借书 ->_-> var Book = function(id, title, author, genre,