程序博客网 > nagios 监控mysql

用javascript实现仿163的js广告向下挤压页面的效果

来源：互联网发布：nagios 监控mysql 编辑：程序博客网时间：2024/05/17 03:55

本次实现一个js小小特效，效果就是广告从页面的上方出来将基本页面挤压下去。

实现的思路是将两个div（广告div1和div2）。将div1的高度不断增加，增加的同时div2的y轴坐标变大，div1的高度增加多少相对应的y轴坐标加大多少。

当加大到一定程度的时候，将速度值变为自身负数，并且改变函数下一次的执行间隔，这样就会向上走，当高度为0是将计时器清掉ok。

呵呵，下边看我的源代码吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

//将div的属性改为position:absolute;否则div2.style.top=divheight+"px";没作用

<style>
div{
   position:absolute;

   }

</style>

</head>

<body>

<div id="div1" style="width:1000px; height:0px; background-color:#FF3; border:double; border-color:red"></div>
<div id="div2" style="width:1000px; height:600px; background-color:#00F; border:double; border-color:red"></div>
<script language="javascript" type="text/javascript">

var div1=document.getElementById("div1");
var div2=document.getElementById("div2");

//定义div1的高度和div2的起始纵坐标大小
var divheight=0;
//定义div1的高度和div2的起始纵坐标大小增减的速度
var div1Speed=1;

function floatimg(){
   //求出div1增长后的高度
   //div1的高度提高多少，相应的div2的起始点的纵坐标就是多少
   divheight+=div1Speed;
   //如果div1的高度divheight未达到80的时候div1的高度和div2的起始纵坐标都是增加1的，而且按照间隔100的速率循环执行函数floatimg()
   if(divheight!=80){

   div1.style.height=divheight+"px";
   div2.style.top=divheight+"px";

   t=setTimeout("floatimg()",20);

   }else{

   //当div1的高度达到80的时候，div1的高度和div2的起始纵坐标都是减少1的，如何减少呢？很简单，就将增长速度div1Speed变为自身的负数，这样每次加的是-1
   //还需要改的地方就是setTimeout执行floatimg()函数的间隔，改为3000，让div1的高度达到80的时候有停顿效果。
       div1Speed=-div1Speed;
       div1.style.height=divheight+"px";
       div2.style.top=divheight+"px";

       t=setTimeout("floatimg()",3000);
       }
       //当divheight再次为0的时候清掉计时器
       if(divheight==0){
           clearTimeout(t);
           }

   }

floatimg();
</script>

</body>
</html>

nagios 监控mysql

nagios 监控mysql

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子山楂树剪枝山楂树怎么种山楂树五线谱山楂树商标山楂树俄国山楂树背景山楂树花图片美丽的山楂树山楂树吉他谱山楂树酒店山楂树静秋山楂树之变相约山楂树赵鹏山楂树山楂树习性山楂树图山楂树叶子山楂树的爱恋山楂树移栽山楂树演唱者黑鸭子山楂树山楂树萨克斯山楂树手机壳山楂树海子海子山楂树苏联山楂树山楂树u9218 山楂树原唱山楂树原型山楂树之山楂树合唱谱山楂树的图片山楂树原曲梦见山楂树山楂树的种子山楂树繁殖山楂树作文山楂树简谱山渣树山桔树用筷子去山楂核妙招