简单记录

微信引导分享页面 及 素材

时间 ：2019-6-10  作者： thtomatic  分类： 前端   评论: [ 0 ] 条  浏览: [ 1814 ] 次

CSS:

    #shareit {
        -webkit-user-select: none;
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.85);text-align: center;top: 0;left: 0;z-index: 105;
    }
    #shareit img { max-width: 100%;}
    .arrow {position: absolute; right: 10%;top: 5%;}

html:

        <div class="col-xs-2 clearfix">
            <img src="{$Think.config.tpl_src}/bootstrap/img/img-fx.png"
                 class="img-responsive pull-right yxg-question-share" alt="Responsive image" id="share_btn">
        </div>

            

<div id="shareit">
    <img class="arrow" src="/bootstrap/guide_point.png">
</div>

其实Html上可以随意写 只要指定一个 点击地方的id是share_btn

Js:

    $("#share_btn").on("click", function() {
        $("#shareit").show();
    });
    $("#shareit").on("click", function(){
        $("#shareit").hide();
    })

素材（图片上传会有水印 所以压缩上传）：

guide_point.zip

• 赞1
• 
• 踩0