kendo ui 左侧弹出分享框

复制代码
<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/fx/slidein#">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>
<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: 100px;
        left: 0;
        width: 60px;
        margin-left: -60px;
        border: solid #e9e9e9;
        border-width: 1px 1px 1px 0;
    }

    #slide-in-handle {
        position: absolute;
        left: 60px;
        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: 269px;
        background: #fff;
        text-align: center;
    }

    #slide-in-share li {
        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>
复制代码

 

posted @   星星c#  阅读(142)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手