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 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
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
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
JavaScript实现联动菜单特效
2020/01/07 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python地图绘制实操详解
2019/03/04 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python 实现目录复制的三种小结
2019/12/04 Python
如何在Python对Excel进行读取
2020/06/04 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
机械工程师求职自我评价
2013/09/23 职场文书
出纳的岗位职责
2013/11/09 职场文书
库房主管岗位职责
2013/12/31 职场文书
公司人事任命通知
2015/04/20 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技