超棒的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 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
基于对象合并功能的实现示例
2017/10/10 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
垃圾回收器的相关知识点总结
2018/05/13 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
详解python中的装饰器
2018/07/10 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
三八节标语
2014/06/27 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
社会实践活动报告
2015/02/05 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript