超棒的javascript页面顶部卷动广告效果


Posted in Javascript onDecember 01, 2007

前言

这篇文章主要介绍了关于利用javascript实现的超棒的页面顶部卷动广告效果,主要通过控制图片外层div来实现的,下面话不多说了,来一起看看详细的介绍吧。

超棒的javascript页面顶部卷动广告效果

实例代码:

<!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 type="text/css"> 
<!-- 
body { margin:0;background:#000; } 
img { border:0; } 
--> 
</style> 
<script type="text/javascript"> 
<!-- 
var nowheight=0;  //初始广告层高度 
var maxheight=224;  //广告层最大高度 
var adobj; 
var opendiv; 
var closdiv; 
var addfunc; 
var handobj; 
var reducefunc;     
var speed=7;    //层卷动速度 
function showtopad() { 
  adobj=document.getElementById("bigad"); 
  opendiv=document.getElementById("opendiv"); 
  closdiv=document.getElementById("closdiv"); 
  if (nowheight<=0) { 
    opendiv.style.display="none"; 
    adobj.style.display="block"; 
    addfunc=setInterval("addheight()",1); 
  } 
} 
function closetopad() { 
  if (nowheight>0) { 
    callreduceheight(); 
    if (typeof(handobj)=="number") { 
      clearTimeout(handobj); 
    } 
  } 
} 
function addheight() { 
  nowheight+=speed; 
  if (nowheight>maxheight) { 
    clearInterval(addfunc); 
    closdiv.style.top=maxheight-30; 
    closdiv.style.display="block"; 
    handobj=setTimeout("callreduceheight()",6000); 
    return; 
  } 
  adobj.style.height=nowheight+"px"; 
} 
function callreduceheight() { 
  closdiv.style.display="none"; 
  reducefunc=setInterval("reduceheight()",1); 
} 
function reduceheight() { 
  adobj.style.height=nowheight+"px"; 
  nowheight-=speed; 
  if (nowheight<=0) { 
    clearInterval(reducefunc); 
    adobj.style.display="none"; 
    opendiv.style.display="block"; 
    return; 
  } 
} 
//--> 
</script> 
</head>

<body>

  <div id="opendiv" style="position:absolute;top:3px;right:3px;z-index:10;padding:3px;border:1px #000 solid; cursor:hand;background:#fff;"><span onclick="showtopad()">打开</span></div> 
  <div id="closdiv" style="position:absolute;right:4px;z-index:10;padding:3px;border:1px #000 solid;display:none;cursor:hand;background:#fff;"><span onclick="closetopad()">关闭</span></div> 
   
  <div id="bigad" style="width:1003px;height:0;overflow:hidden;display:none;"> 
    <a href="https://3water.com/" target="_blank"> 
      <img src="https://3water.com//f.3water.com/f/6amI1aMS5ueZXQu/e44ad42a3319d3e59e41a7bcac7dee30.jpg"> 
    </a> 
  </div> 
  <p style="margin:5px;text-align:center;font-weight:bold;font-size:14px;color:#fff;"> 
    上面是广告,你可以点击看看效果!^_^ 
  </p> 
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
jQuery 选择器理解
Mar 16 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
解析原生JS getComputedStyle
May 25 Javascript
js同时按下两个方向键
Dec 01 #Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 #Javascript
jquery api参考 visualjquery 中国线路 速度快
Nov 30 #Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 #Javascript
jquery 指南/入门基础
Nov 30 #Javascript
Prototype1.6 JS 官方下载地址
Nov 30 #Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 #Javascript
You might like
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
python实现的系统实用log类实例
2015/06/30 Python
详解Django通用视图中的函数包装
2015/07/21 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
.net面试题
2015/12/22 面试题
考试没考好检讨书
2014/01/31 职场文书
小学毕业寄语大全
2014/04/03 职场文书
软件售后服务方案
2014/05/29 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
公司户外活动总结
2014/07/04 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
网络营销计划
2015/01/17 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python