原生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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
前端开发基础javaScript的六大作用
Aug 06 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
PHP mkdir()定义和用法
2009/01/14 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python转换时间的图文方法
2019/07/01 Python
python中删除某个元素的方法解析
2019/11/05 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python partial函数原理及用法解析
2019/12/11 Python
Ibatis的核心配置文件都有什么
2014/09/08 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
小区消防演习方案
2014/02/21 职场文书
委托收款证明
2015/06/23 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技