All Components

Effects / Slide In

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Slide In</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div id="slide-in-content"> 
    <div id="slide-in-share"> 
     <a id="slide-in-handle" href="#">Share</a> 
     <ul> 
      <li><a class="share-button share-facebook" href="#">Share in Facebook</a></li> 
      <li><a class="share-button share-twitter" href="#">Post in Twitter</a></li> 
      <li><a class="share-button share-tumblr" href="#">Reblog in Tumblr</a></li> 
     </ul> 
    </div> 
   </div> 
  </div> 
  <style>
    #slide-in-content {
        width: 600px;
        height: 558px;
        background: transparent url(../content/web/fx/blogs-screenshot.png) no-repeat 50% 50%;
        border: 1px solid #ededed;
        -o-box-shadow: 0 0 5px rgba(0,0,0,.15);
        -moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
        box-shadow: 0 0 5px rgba(0,0,0,.15);
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    #slide-in-share {
        position: absolute;
        top: 200px;
        left: 0;
        width: 200px;
        margin-left: -200px;
        border: solid #e9e9e9;
        border-width: 1px 1px 1px 0;
    }

    #slide-in-handle {
        position: absolute;
        left: 200px;
        width: 31px;
        height: 69px;
        background: #1b7458 url(../content/web/fx/share-handle.png) no-repeat 50% 50%;
        color: #fff;
        text-indent: -999em;
    }

    #slide-in-share ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 69px;
        background: #fff;
        text-align: center;
    }

    #slide-in-share li {
        display: inline-block;
        margin: 0 2px;
    }

    .share-button {
        background: #fff url(../content/web/fx/social-buttons.png) no-repeat 50% 50%;
        border: 4px solid #a6a6a6;
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-top: 17px;

        -webkit-border-radius: 21px;
        -moz-border-radius: 21px;
        border-radius: 21px;
        text-indent: -999em;
        color: #a6a6a6;
    }

    .share-button:hover {
        border-color: #333;
    }

    .share-facebook { background-position: 50% -2px; }
    .share-twitter { background-position: 50% -40px; }
    .share-tumblr { background-position: 50% -78px; }

    .share-facebook:hover { border-color: #3b5998; }
    .share-twitter:hover { border-color: #00c0f7; }
    .share-tumblr:hover { border-color: #2b4865; }
</style> 
  <script>
    var slide = kendo.fx($("#slide-in-share")).slideIn("left"),
        visible = true;

    $("#slide-in-handle").click(function(e) {
        if (visible) {
            slide.reverse();
        } else {
            slide.play();
        }
        visible = !visible;
        e.preventDefault();
    });

</script>   
 </body>
</html>