超棒的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代码
Apr 01 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
innerText 使用示例
Jan 23 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
我的论坛源代码(四)
2006/10/09 PHP
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP数组操作类实例
2015/07/11 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Python实现图片转字符画的示例代码
2017/08/21 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
寄语学生的话
2014/04/10 职场文书
个人担保书范文
2014/05/20 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2014年纪委工作总结
2014/12/05 职场文书
2015年小学开学寄语
2015/02/27 职场文书
检讨书范文大全
2015/05/07 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL