Question

我想更改此滑动面板在此jsfiddle中的移动距离。我使用了此jsfiddle中的代码。在那一个中，如果我将slideit的宽度和左侧关闭设置更改为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>

Answer 1

非常直截了当。增加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/

如何增加滑出的宽度

1 个答案: