zoukankan      html  css  js  c++  java
  • JS之document例题讲解2

    例题三、图片轮播

    <body>
    
    <div style="1000px; height:250px; margin-top:30px">
      <img src="img/11.jpg" width="1000" height="250" />
      <img src="img/22.png" width="1000" height="250" style="display:none" />
      <img src="img/33.png" width="1000" height="250" style="display:none" />
      <img src="img/44.png" width="1000" height="250" style="display:none" />
    </div>
    
    </body>
    <script type="text/javascript">
    
    window.setInterval("Huan()",2000);
    
    
    //找到图片的最大索引
    var n = document.getElementsByTagName("img").length-1;
    //存当前图片的索引
    var d =0;
    //换图
    function Huan()
    {
      var attr = document.getElementsByTagName("img");//找到所有图片
      d++;//当前索引加1
      if(d>n)//判断索引是否超出范围
      {
        d = 0;
      }
      for(var i=0;i<=n;i++)//换图
      {
        attr[i].style.display = "none";//让所有隐藏
      }
      attr[d].style.display = "block";//让该索引的显示
    }
    
    </script>

    例题四、选项卡效果

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #menu{ 240px; height:30px;}
    .list{ 60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}
    .list:hover{ cursor: pointer}
    .nr{ 240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}
    </style>
    
    </head>
    
    <body>
    
    <div style="700px; height:500px; margin-top:30px">
      <div id="menu">
        <div class="list" style="background-color:#0F0" onclick="Show('d1')">娱乐</div>
        <div class="list" style="background-color:#369" onclick="Show('d2')">社会</div>
        <div class="list" style="background-color:#F60" onclick="Show('d3')">体育</div>
        <div class="list" style="background-color:#CC3" onclick="Show('d4')">军事</div>
      </div>
      <div id="d1" class="nr" style="background-color:#3C0">娱乐新闻</div>
      <div id="d2" class="nr" style="background-color:#399; display:none">社会新闻</div> //隐藏
      <div id="d3" class="nr" style="background-color:#F30; display:none">体育新闻</div> //隐藏
      <div id="d4" class="nr" style="background-color:#CF3; display:none">军事新闻</div> //隐藏
    </div>
    
    </body>
    <script type="text/javascript">
    
    function Show(id)//鼠标点击执行
    {
      var attr = document.getElementsByClassName("nr");//隐藏所有
      for(var i=0;i<attr.length;i++)
      {
        attr[i].style.display = "none";
      }
      document.getElementById(id).style.display = "block";//显示当前的
    }
    
    </script>

    五、滑动效果

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #left{ height:600px; background-color:#63C; float:left}
    #right{ height:600px; background-color:#F33; float:left}
    #btn{ 30px; height:30px; background-color:#FFF; position:relative; top:285px; color:#60F; font-weight:bold; text-align:center; line-height:30px; vertical-align:middle; float:left}
    #btn:hover{ cursor:pointer}
    </style>
    </head>
    <body>
    <div style="1000px; height:600px">
      <div id="left" style="200px;">
      <div id="btn" onclick="Bian()" style="left:185px;">-></div>
    </div>
    <div id="right" style="800px;"></div>
    </body>
    <script type="text/javascript">
    
    function Bian()//点击->时执行Bian循环
    {
      Dong();//执行Dong循环
    }
    
    function Dong()//循环dong的作用是改变大小和位置
    {
      var d1 = document.getElementById("left");//找到id为left的元素
      var d2 = document.getElementById("right");
      var btn = document.getElementById("btn");
      //左侧DIV变宽
      var yskd1 = d1.style.width;
      var w1 = yskd1.substr(0,yskd1.length-2);
      var w1 = parseInt(w1)+2;
    
      d1.style.width = w1+"px";
    
      //右侧DIV变窄
      var yskd2 = d2.style.width;
      var w2 = yskd2.substr(0,yskd2.length-2);
      var w2 = parseInt(w2)-2;
      d2.style.width = w2+"px";
    
      //将按钮移动
      var ysjl = btn.style.left;
      var w3 = ysjl.substr(0,ysjl.length-2);
      var w3 = parseInt(w3)+2;
      btn.style.left = w3+"px";
    
      if(w2>200)
      {
        //自己调自己
        window.setTimeout("Dong()",1);
      }
    
    }
    
    </script>

    例题六、进度条的制作

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #wai{ 200px; height:10px; border:1px solid #60F;}
    #nei{ 0px; height:10px; background-color:#F33; float:left}
    </style>
    </head>
    <body>
    <div style="600px; height:300px; margin-top:30px">
      <div id="wai"></div>
      <div id="nei"></div>
    <input type="button" value="开始" onclick="Start()" />
    </div>
    </body>
    <script type="text/javascript">
    
    function Start()
    {
      Bian();
    }
    var bfb = 0;
    function Bian()
    {
      //将百分比变化
      bfb= bfb+1;
      //改变宽度
      document.getElementById("nei").style.width = bfb+"%";
      //判断
      if(bfb<100)
      {
        window.setTimeout("Bian()",50);
      }
    }
    </script>
  • 相关阅读:
    delphi7在windows server 2003企业版上不能打开项目的选项(Options)窗口的解决方法
    简单的两个字“谢谢”,会让我坚持我的写作,我也要谢谢你们
    F41GUT 安装Windows server 2003系统后无法安装显卡驱动的解决办法
    远程桌面无法登录windows server 2003服务器
    F41GUT 安装Windows server 2003系统后无法安装显卡驱动的解决办法
    MS SQL Server 2000版在windows server 2003企业版系统上运行时造成数据库suspect的解决方法
    delphi7在windows server 2003企业版上不能打开项目的选项(Options)窗口的解决方法
    远程桌面无法登录windows server 2003服务器
    MS SQL Server 2000版在windows server 2003企业版系统上运行时造成数据库suspect的解决方法
    关于ajax 和josn
  • 原文地址:https://www.cnblogs.com/Strive-count/p/5900751.html
Copyright © 2011-2022 走看看