超棒的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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
实用函数3
2007/11/08 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
yii用户注册表单验证实例
2015/12/26 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
小程序云开发实战小结
2018/10/25 Javascript
Python验证文件是否可读写代码分享
2017/12/11 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
简历的自我评价
2014/02/03 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
投资协议书范本
2014/04/21 职场文书
防暑降温通知书
2015/04/27 职场文书
班主任寄语2016
2015/12/04 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang
nginx容器方式反向代理实战
2022/04/18 Servers