如何增加滑出的宽度

我想更改此滑出面板在此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

如何增加滑出的宽度

回答

相关问题