<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    js實現滑動門效果的詳細代碼分享

    發布時間:2020-04-09 10:25:01 來源:億速云 閱讀:59 作者:小新 欄目:web開發

    這篇文章主要為大家詳細介紹了js實現滑動門效果的代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下。

    js實現滑動門效果的詳細代碼分享

    一、實現滑動門所需技術

    1、簡單的HTML基礎知識

    2、簡單的CSS基礎樣式

    3、基本的javascript知識

    二、實現方法

    HTML

    <div id="container">
      <img src="images/20190503222903.png"/><!--圖片可以自己修改-->
      <img src="images/20190503222943.png"/>
      <img src="images/20190503223003.png"/>
      <img src="images/20190503223514.png"/>
    </div>

    CSS

    *{
      margin: 0;
      padding: 0;
      background-color: #ccc;
    }
    p{
      text-align: center;
    }
    #container{
      width: 1130px;
      height: 350px;
      margin: 0 auto;
      border-right:1px solid #FF0000;
      border-bottom:1px solid #FF0000;
      overflow: hidden;
      position: relative;
    }
    #container img{
      width:500px;
      height:350px;
      display: block;
      position: absolute;
      border-bottm:1px solid #FF0000;
    }

    JS

    //加載dom樹
    window.onload = function(){
    //定義盒子
    var box=document.getElementById('container');
    //定義圖片
    var imgs=box.getElementsByTagName('img');
    //圖片寬度
    var imgWidth = imgs[0].offsetWidth;
    //隱藏寬度
    var exposeWidth = 210;
    //盒子寬度
    var boxWidth = imgWidth + (imgs.length -1) * exposeWidth;
    box.style.width='px';
    //設置每道門的初始位置
    function SetImgsPos(){
    for(var i = 1;i<imgs.length;i++){
          imgs[i].style.left = imgWidth + exposeWidth*(i -1)+ 'px';
          }
        }
        SetImgsPos();
         //計算每道門應該移動的距離
        var translate = imgWidth - exposeWidth;
        //為每道門綁定事件
        for(var i=0;i<imgs.length;i++){
          //使用立即調用的函數表達式,為了獲得不同的i值
          (function(i){
            imgs[i].onmouseover = function(){
              SetImgsPos();
              //打開門
              for(var j=1;j<=i;j++){
                imgs[j].style.left = parseInt(imgs[j].style.left,10) - translate + 'px';
              }
            }
          })(i);
        }
      }

    關于js實現滑動門效果的詳細代碼就分享到這里了,當然并不止以上和大家分析的辦法,不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    js
    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2