如何增加滑出的寬度

我想更改此滑出面板在此jsfiddle中的走向。我使用了這個jsfiddle的代碼。在那一個，如果我改變滑動的寬度和左邊的關閉設置爲200而不是100，寬度增加並且正常工作。但是如果我在我的工作也一樣，面板就會消失。我猜測我在將它轉換到左側時沒有正確地更改它。任何人都可以解釋如何增加寬度，使面板滑出更遠？如何增加滑出的寬度

<style> 
    div#slideit {position: fixed; top: 100px; left:0px; margin: 0px; padding: 20px 0px 0px; color:#fff; background:#5681b4; list-style: none; z-index:9999; width: 100px; border-radius:0px 30px 30px 5px} 
    div#slideit .slideit-btn {background:#5681b4; border-radius:0px 10px 10px 0px; position:absolute; top:10px; left:90px; width:40px; height:70px; display:block; cursor:pointer;} 
    div#slideit .slideitspan {width:100px; margin:4px 2px; text-align:center; text-decoration:none; color:#FFF;} 
    .vertical-text { 
    font-size:18px; 
    transform: rotate(90deg); 
    transform-origin: left top 0; 
    position:absolute; top: 10px; left:34px; 
    } 
    </style> 

    <div id="slideit"> 
    <div class="slideit-btn"> <span class="vertical-text"></span></div> 
    <div class="slideitspan">You can now easily create banners, configure them as you like, link them to anywhere you want, like to products, categories, any page of your store or any other website and display them on various areas of your store, for example the front page. Learn more on the mini template system usage page </div> 
    </div> 

    <script> 
    $(function() { 
    $.fn.ToggleSlide = function() { 
     return this.each(function() { 
      //$(this).css('position', 'absolute'); 

      if(parseInt($(this).css('left')) < 0) { 
       $(this).animate({ 'left' : '0px' }, 120, function() { 
       $(".vertical-text").text("Close"); 
        //$(this).css('position', 'relative'); 
       }); 
      } 
      else { 
       $(this).animate({ 'left' : '-100px' }, 120, function() { 
       $(".vertical-text").text("Open"); 
        //$(this).css('position', 'relative'); 
       }); 
      } 
     }); 
    }; 

    $('#slideit').ToggleSlide(); 

    $(".slideit-btn").bind("click", function() { 
     $('#slideit').ToggleSlide(); 
    }); 
    }); 
    </script>

來源

2017-01-17 user3052443

非常直截了當。增加html元素的寬度

*{box-sizing: border-box;} 
#slideit, #slideit .slideitspan{width:300px;} 
#slideit .slideitspan{padding: 30px;} 
#slideit .slideit-btn{left: initial; right: -32px;}

然後調整由JS的偏移應用到相同的量：

$(this).animate({ 'left' : '-300px' }, 120, function() {...

https://jsfiddle.net/2c7rzm3q/

來源

2017-01-17 20:04:47

謝謝。這工作。我不明白所有的變化，但你能告訴我爲什麼他們在我的代碼中需要，而不是原來的？是否因爲我所做的更改，如刪除列表？我只是好奇。 – user3052443

我剛剛改變了寬度和偏移量。我不確定你是什麼意思。 –

你的jsfiddle有上面提到的額外4行。我認爲他們必須被添加。你剛剛添加他們更清楚嗎？我從來沒有見過類似* {box-sizing：border-box;}的聲明，所以我認爲它是必需的。如果4行可以合併到現有代碼中，從編碼的角度來看，效率會更高，還是現在與css有關？ – user3052443

如何增加滑出的寬度

回答

相關問題