这篇文章主要为大家详细介绍了javaScript实现条事件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现条事件的具体代码,供大家参考,具体内容如下

代码:

<html>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title></title>

  <style>
   body {
    margin: 0;
    padding: 0;
   }

   .cont {
    height: 7000px;
   }

   #top {
    position: fixed;
    width: 100%;
    height: 55px;
    top: 0px;
    left: 0px;
    background-color: rosybrown;
    display: none;
   }

   #left {
    position: fixed;
    width: 50px;
    height: 400px;
    top: 150px;
    left: 50px;
    background-color: cadetblue;
    display: none;
   }

   #left ul {
    list-style: none;
    padding-left: 0px;
   }

   #left ul li {
    border: 1px solid white;
    /*color: azure;*/
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 15px auto;
    /*display: none;*/
   }

   .a {
    background-color: burlywood;
    color: #FFFFFF;
   }
  </style>

  <script>
   //事件
   function myScroll() {

    var i = document.body.scrollTop;
    var top = document.getElementById("top");
    var left = document.getElementById("left");
    var f1 = document.getElementById("f1");
    var f2 = document.getElementById("f2");
    var f3 = document.getElementById("f3");
    var f4 = document.getElementById("f4");
    var f5 = document.getElementById("f5");
    var f6 = document.getElementById("f6");

    //控制顶部
    if(i >= 1000) {
     top.style.display = "block";
     top.innerHTML = i;
    } else {
     top.style.display = "none";
    }

    //控制左侧
    if(i >= 2000) {
     left.style.display = "block";
    } else {
     left.style.display = "none";
    }

    //显示楼层

    if(i >= 2000 && i <= 2500) {
     f1.className = "a";
     f2.className = "";
     f3.className = "";
     f4.className = "";
     f5.className = "";
     f6.className = "";
    } else if(i > 2500 && i <= 3000) {
     f1.className = "";
     f2.className = "a";
     f3.className = "";
     f4.className = "";
     f5.className = "";
     f6.className = "";
    } else if(i > 3000 && i <= 3500) {
     f1.className = "";
     f2.className = "";
     f3.className = "a";
     f4.className = "";
     f5.className = "";
     f6.className = "";
    } else if(i > 3500 && i <= 4000) {
     f1.className = "";
     f2.className = "";
     f3.className = "";
     f4.className = "a";
     f5.className = "";
     f6.className = "";
    } else if(i > 4000 && i <= 4500) {
     f1.className = "";
     f2.className = "";
     f3.className = "";
     f4.className = "";
     f5.className = "a";
     f6.className = "";
    } else if(i > 4500 && i <= 5000) {
     f1.className = "";
     f2.className = "";
     f3.className = "";
     f4.className = "";
     f5.className = "";
     f6.className = "a";
    }

   }
  </script>

 </head>

 <body onscroll="myScroll()">
  <div id="left">
   <ul>
    <li id="f1">1F</li>
    <li id="f2">2F</li>
    <li id="f3">3F</li>
    <li id="f4">4F</li>
    <li id="f5">5F</li>
    <li id="f6">6F</li>

   </ul>

  </div>
  <div id="top"></div>
  <div></div>

 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
直击|人人车2019新战略:成立8千万元基金 赋能合伙人

直击|人人车2019新战

李健称,人人车将正式启动“新平台,新零售”的战略升级,在
三星电子现金储备创历史新高 高达888亿美元

三星电子现金储备创历

截至去年年底,三星电子的现金储备已经超过100万亿韩元(
卡梅隆导演对话刘慈欣:我觉得应该要拍《三体》电影

卡梅隆导演对话刘慈欣

刘慈欣提问卡梅隆:今年中国春节有两部成本很高的科幻电
百度投资版图出炉:一年出手68次 最高一笔投了21亿元

百度投资版图出炉:一

在各个领域里潜伏:交通出行、智能硬件、医疗健康、企业
Trustdata:1月阅读、游戏类部分应用涨幅明显

Trustdata:1月阅读、游

1月期间,阅读、游戏和部分视频娱乐类应用涨幅明显,个人
顶尖宣传策划+巨额预算:Netflix力争奥斯卡最佳影片

顶尖宣传策划+巨额预

如果《罗马》获得主要奖项,将会改写奥斯卡的历史,也会改
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图