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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
body {height:2000px;}
#menu {
 width:220px;
 height:420px;
 position:absolute;
 z-index:1000;
 background:url(http://www.qqdang.net/code/menutop.gif) repeat-x top left;
}
#menu_h {
 float:right;
}
#menu_h img {
 cursor:pointer; 
}
#menu_c {
 width:188px;
 height:398px;
 border:1px solid #666;
 background:#ecf6f5;
 margin:12px 0 0 5px;
}
#menu_c h2 {
 text-align:center;
}
</style>
</head>
<body>
<div id="ads" style="width:900px;height:300px;background:#369;margin:0 auto;"></div>
<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>
</body>
</html>

提示:您可以先修改部分代码再运行

时间: 2024-09-30 01:23:53

js顶部广告效果的相关文章

js 收缩-js顶部广告問題,特别菜的菜鸟求助

问题描述 js顶部广告問題,特别菜的菜鸟求助 大致情況: 写一個网页,顶部會向下弹出一個图片广告,高度为600.然後点击隐藏按钮,图片广告會向上收缩.(已經完成) 現在我想在这个基础上做些改动, 改动为:当点击隐藏按钮后,向上收缩的高度为400,也就是隐藏400的高度,显示200的高度. 我想的是收缩一個DIV的高度,但是一直沒有成功, 解决方案 代码没办法附上,有沒有人指點指點 解决方案二: 不是一个道理么改改不就行了 解决方案三: 可以把广告大图,截成两个小图. 就很好实现了. 解决方案四:

js实现广告漂浮效果的小例子

这篇文章介绍了在JS中广告漂浮效果的实现代码,有需要的朋友可以参考一下   复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> div{ position:a

JS实现可关闭的对联广告效果代码_javascript技巧

本文实例讲述了JS实现可关闭的对联广告效果代码.分享给大家供大家参考.具体如下: 这是非常经典的一款对联广告代码,带有关闭按钮,用户可以自行关掉广告,另外,广告的垂直位置会随着滚动条的变化自动定位,也就是拖动浏览器滚动条的时候广告始终显示,不会被隐藏掉,现在很多网站都在用的对联广告代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-2adv-style-codes/ 具体代码如下: <html> <head

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

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

JS实现回到页面顶部动画效果的简单实例_javascript技巧

最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight

网站顶部广告js代码

提示:您可以先修改部分代码再运行 网站顶部广告js代码 提示:您可以先修改部分代码再运行

jQuery实现简单而且很酷的返回顶部链接效果

文章简介:使用jQuery创建人性化的返回顶部链接. 之前写过关于创建人性化的返回顶部链接的文章,讨论了返回顶部链接需要具备哪些特点才能称得上人性化.一直以来我都觉得停留在视觉区域内的返回顶部连接更为完美一些,但由于对javascript不熟悉,所以一直不知道如何在技术上实现,只能使用别人做好的javascript代码.最近一段时间学习了jQuery,发现其实用jQuery来写的话很简单,所以在这片文章里我会介绍一下如何自己动手创建简单而且很酷的返回顶部链接效果,让我们开始. jQuery返回顶

js实现楼层效果的简单实例_javascript技巧

今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果_javascript技巧

本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo