Question

所以我刚刚用它的共享按钮创建了一个div（#sharebox）。当我点击#Share按钮时，我希望它从屏幕的右侧出现（好像它是从右侧滚动）。

HTML：

<div id="sharebox">
<div id="sharelist">

<p><div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')
    );</script></p>

<p><a href="https://twitter.com/share" class="twitter-share-button" data-related="jasoncosta" data-lang="en" data-size="small" data-count="none">Tweet</a>
              <script>!function(d,s,id){
              var js,fjs=d.getElementsByTagName(s)[0];
              if(!d.getElementById(id)){js=d.createElement(s);
              js.id=id;js.src="https://platform.twitter.com/widgets.js";
              fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>

<p><script src="//platform.linkedin.com/in.js" type="text/javascript">lang:en_US</script><script type="IN/Share"></script>
              <script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script></p>

<p><a href="http://www.reddit.com/submit" onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false">
             <img src="http://www.reddit.com/static/spreddit10.gif" alt="submit to reddit" border="0" height=22 width=61/></a></p>

</div><!--sharelist-->
</div><!--sharebox-->

CSS：

#sharebutton{border-radius:10px;
text-align:center;
border:2px solid white;
color:white;
width:60px}

#sharebox { height:174px;
        width:80px;
        border:2px solid white;
        border-radius:15px;
        background-color:#03999b;
        background-image: -webkit-gradient(linear, 100% 45%, 0% 97%, from(#03999b), to(#262525));
        background-image: -webkit-linear-gradient(top, #03999b, #262525); 
        background-image:    -moz-linear-gradient(top, #03999b, #262525);
        background-image:     -ms-linear-gradient(top, #03999b, #262525);
        background-image:      -o-linear-gradient(top, #03999b, #262525);
        }            
#sharelist{margin-left:10px;}

Answer 1

在你的CSS中你应该以#sharebox的方式向右开始，就像这样。

#sharebox {
     position: fixed;
     right: 0;
     top: 100px;
     margin-right: -400px;
}

然后，当有人点击分享按钮时，您可以执行类似的操作。

$('#sharebutton').click(function() {
     $('#sharebox').animate({left: "400px"}, 8000);
});

了解更多信息http://api.jquery.com/animate/

Answer 2

您也可以使用较新的CSS功能（如transition：

）来完成此操作

<div id="share">Content</div>

以下基本CSS：

#share {
    width: 10em; height: 10em;
    position: absolute;
    top: 50%; left: 50%;
    transition: left 2s, transform 2s;
    transform: translateX(-50%) translateY(-50%);
}

#share.offscreen {
    left: 100%;
    transform: translateX(0) translateY(-50%)
}

请注意，transition和transform将需要某些浏览器的供应商前缀。此时，我们需要做的就是在#share上切换课程：

您可以使用classList：

在现代浏览器中执行此操作

document.querySelector( "#share" ).classList.toggle( "offscreen" );

或者使用jQuery：

$( "#share" ).toggleClass( "offscreen" );

演示：http://jsfiddle.net/m383R/

jQuery div出现在屏幕的右侧

2 个答案: