js实现拉幕效果的广告代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了js实现拉幕效果的广告代码。分享给大家供大家参考。具体如下:

这是一款拉幕效果的广告代码,广告图片像窗帘的幕布一样慢慢的被拉上去了,缩小至一定大小后定格,目前来说,在一些大型的门户网站中仍然可以见到这种效果。

运行效果截图如下:

js实现拉幕效果的广告代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>slide</title>
<style type="text/css"> 
html,body{
 width:100%;
 height:100%;
 margin:0px;
 border:0px;
 text-align:center;
}
div{
 margin:auto;
 overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript"> 
function tag(obj){
 return document.getElementsByTagName(obj)[0];
}
window.onload=function(){
 setTimeout("slideUp();",1000);
}
function slideUp(){
 if(tag("div").offsetHeight>0){
  if(tag("div").offsetHeight>10){
   tag("div").style.height=tag("div").offsetHeight-10+"px"
   setTimeout("slideUp();",20);
  }else{
   tag("div").style.display="none";
   tag("img").src="images/wall8.jpg";
   tag("div").style.display="block";
   slideDown();
  }
 }
}
function slideDown(){
 if(tag("div").offsetHeight<80){
  if(tag("div").offsetHeight<70){
   tag("div").style.height=tag("div").offsetHeight+10+"px";
   setTimeout("slideDown();",20);
  }else{
   tag("div").style.height="80px";
  }
 }
}
</script>
<div><img src="images/wall8.jpg"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
javascript基本语法
May 31 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
JS实现弹性漂浮效果的广告代码
Sep 02 #Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 #Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 #Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 #Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 #Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 #Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 #Javascript
You might like
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
python里 super类的工作原理详解
2019/06/19 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python如何实现远程方法调用
2020/08/07 Python
用python进行视频剪辑
2020/11/02 Python
python IP地址转整数
2020/11/20 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
计算机专业毕业生自我鉴定
2014/01/16 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
Python 如何安装Selenium
2021/05/06 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android