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 用Node.js写Shell脚本[译]
Sep 20 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
vue使用element-ui按需引入
May 20 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
检测png图片是否完整的php代码
2010/09/06 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
php判断linux下程序问题实例
2015/07/09 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
Document 对象的常用方法
2009/07/31 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
物流专员岗位职责
2014/02/17 职场文书
企业办公室岗位职责
2014/03/12 职场文书
药房管理制度范本
2015/08/06 职场文书
经典祝酒词大全
2015/08/12 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Python利用capstone实现反汇编
2022/04/06 Python
部分武汉产收音机展览
2022/04/07 无线电