原生js实现网页顶部自动下拉/收缩广告效果


Posted in Javascript onJanuary 20, 2017

知识要点

1.实现原理:

通过递归改变div的高度值达到缓慢下拉的效果。

2.一共分为3个步骤我写了三个函数

第一个show()函数(下拉):初始值高度h<300的话 h+5  反之return退出停止,调用setTimeout方法30毫秒执行一次+5

第二个hide()函数(收回):只是高度的判断不同高度h-5 反之return退出停止,调用setTimeout方法30毫秒执行一次-5

第三个dd()函数(再次弹出):这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0,实现原理与第一个函数一样,

并且一定要在第二个函数(收回)执行后再执行

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
#container{width: 600px; margin: 0 auto;}
p{ line-height: 28px; }
.hidden{background: #E6E6E6; text-align: center; height: auto; overflow: hidden;}
.show{ background: #808080;text-align: center; height: 0; overflow: hidden; }
</style> 
</head> 
<body>
 <div id="container">
  <div class="hidden" id="hid"><p>广告图</p></div>
  <div class="show" id="sho"><p>哈哈哈哈改装成功</p></div>
 </div>
 <script type="text/javascript"> 
 window.onload=function aa(){
 show();
 setTimeout("hide()",3000);
 }
 var h=0;
 var hid=document.getElementById("hid");
 var sho=document.getElementById("sho");
 function show(){
 if(h<300){
  h+=5;
  hid.style.height=h+"px";
 }else{
  return;
 }
 setTimeout("show()",30);
 } 
 function hide(){
 if(h>0){
  h-=5;
  hid.style.height=h+"px";
 }else{
  dd();
  return;
 }
 setTimeout("hide()", 30);
 }
 var a=0;
 function dd(){
 if(a<60){
  a+=1;
  sho.style.height=a+"px";
 }else{
  return;
 }
 setTimeout("dd()",30);
 }
 </script>
</body> 
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
jquery实现抽奖功能
Oct 22 jQuery
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 #Javascript
轻松理解Javascript变量的相关问题
Jan 20 #Javascript
js+css3实现旋转效果
Jan 20 #Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 #Javascript
浅谈angularjs $http提交数据探索
Jan 20 #Javascript
原生js实现无限循环轮播图效果
Jan 20 #Javascript
原生js实现弹出层效果
Jan 20 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
js仿360开机效果
2019/12/26 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python实现拼图小游戏
2020/02/22 Python
实习教师自我鉴定
2013/12/12 职场文书
内衣营销方案
2014/03/15 职场文书
群众路线党课主持词
2014/04/01 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
施工现场安全管理制度
2015/08/05 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书