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

知识要点

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

  • JS右下角广告窗口代码(可收缩、展开及关闭)

    JS右下角广告窗口代码(可收缩、展开及关闭)

    本文实例讲述了JS右下角广告窗口代码.分享给大家供大家参考.具体如下: 这是一款右下角窗口JS代码,完美的右下角,仿新浪博客的右个角弹出窗口,这款Javascript代码在兼容性和操作舒适度方面做的相当不错.调用了几张外部的图片,使用时自行下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • JS实现三级折叠菜单特效，其它级可自动收缩

    JS实现三级折叠菜单特效，其它级可自动收缩

    本文实例讲述了JS实现三级折叠菜单特效,其它级可自动收缩.分享给大家供大家参考,很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行具体如下: 小贴士:去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 运行效果图如下: 实现代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

  • JS实现从顶部下拉显示的带动画QQ客服特效代码

    JS实现从顶部下拉显示的带动画QQ客服特效代码

    本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-

  • JS中用三种方式实现导航菜单中的二级下拉菜单

    JS中用三种方式实现导航菜单中的二级下拉菜单

    我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style

  • JavaScript实现下拉菜单的显示和隐藏

    JavaScript实现下拉菜单的显示和隐藏

    我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单showsub()函数:使用getElementsByTagName获

  • 顶部缓冲下拉菜单导航特效的JS代码

    复制代码 代码如下: <script type="text/javascript">            $(function() {                var d=300;                $('#navigation a').each(function(){                    $(this).stop().animate({                        'marginTop':'-80px'       

  • Angularjs实现带查找筛选功能的select下拉框示例代码

    前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功

  • js实现div层缓慢收缩与展开的方法

    本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu

  • JS+CSS实现DIV层的展开、收缩效果

    JS+CSS实现DIV层的展开、收缩效果

    本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,

  • 全国省市二级联动下拉菜单 js版

    本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&

随机推荐