原生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 相关文章推荐
取得父标签
Nov 14 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
深入php内核之php in array
2015/11/10 PHP
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python避免死锁方法实例分析
2015/06/04 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
大学生应聘推荐信范文
2013/11/19 职场文书
优秀企业获奖感言
2014/02/01 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android