从屏幕右侧拉出DIV(Pull out div from right of screen)

2019-07-29 06:09发布

拔出从左边一个div? 非常简单。 从右边拔不出来? 没那么多。

我要寻找一个div来隐藏屏幕外,但连接到屏幕上的一个小标签。 当用户点击标签,出滑动整个股利。 这是使用jQuery和CSS左基本相当。 虽然从右侧,用户可以直接滚动到看到“隐藏”分区!

这是我想要的( http://jsfiddle.net/yHPTv/ )除了没有在div被部分隐藏屏幕外走后,我想这部分隐藏屏幕外右侧。

以下是我试过到目前为止( http://jsfiddle.net/LU8En/ ),显然这是行不通的,因为一个可以只向右滚动。

使用动画(或滑动或拨动下降)的问题是,我不希望整个div来只是消失/出现,我想这一点是存在。

Answer 1:

http://jsfiddle.net/yHPTv/3/

请注意,下面的例子中不使用jQuery的较新版本的工作,因为这确实为例进行阅读。

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});

改变一切由左到右,然后重新定位clickme的div和文本内容。

另外,给身体一个overflow-x: hidden ,防止水平滚动条。


一些小的更新,使得它与最新版本兼容:

$(function () {
    var rightVal = -280; // base value
    $("#clickme").click(function () {
        rightVal = (rightVal * -1) - 280; // calculate new value
        $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
    });
});

http://jsfiddle.net/yHPTv/2968/



Answer 2:

可能需要做:

body,html { overflow-x:hidden; }

只是身体无“HTML”并没有为我工作。



Answer 3:

我使用从这个链接的代码: http://jsfiddle.net/yHPTv/我做了一些更改,在#clickme按钮现在是#slideout箱外。

<script>
        $(function () {
            $("#clickme").toggle(function () {
                $("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
                $("#clickme").fadeOut( "slow", function() {
            });

            }, function () {
                $("#slideout").animate({left:'-100%'}, {queue: false, duration: 500});
            });
        });
    </script>

正如你所看到的,我还添加了淡出效果,给我点击按钮,因为我需要做的就是添加了#slideout箱内关闭按钮来关闭它放回而不是主#clickme按钮。

帮助深表感谢!

谢谢!



Answer 4:

请检查下面的代码和链接,也可能是它会帮助你。

http://jsfiddle.net/avinashMaddy/4bs3zp44/

<div id="slideout">
   <div id="slidecontent">
       Yar, there be dragonns herre!
   </div>
</div>
<div class="clickme">
    &nbsp;
</div>



<script>
  $(function () {
     $(".clickme").toggle(function () {
       $("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
      }, function () {
    $("#slideout").animate({left:'-280px'}, {queue: false, duration: 500});
   });
  });
</script>


文章来源: Pull out div from right of screen