Welcome, Old Sport!

手机微信分享到朋友圈图文提示效果

by ilikecss ON 2014/12/19 5671

weixin-share-picture-tips-cover最近一直在做移动端的开发和推广,微信无疑是受众面最广流量最多的平台,分享到朋友圈是目前推广渠道最受欢迎的方式。微信在之前已经把大多数分享功能屏蔽,在公众平台提供开发者文档,如果是APP开发可以集成大多数功能,而基于WEB的朋友功能非常有限,下面就来介绍Web页面在手机端微信分享到朋友圈的图文提示效果。

代码简单到爆!

HTML

<div class="weixin_btn hide">
<a href="javascript:void(0)">click here</a>  
</div>  
<div id="share">
<img class="img-responsive" src="images/weixin_share.png" />
</div>

CSS

#share {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    right: 0;
    position: fixed;
    text-align: right;
    top: 0;
    display: none;
    z-index: 3333;
}

javascript

$(function () {
        $(".weixin_btn").click(function () {
            $("#share").show(); //显示提示
        });
        $("#share").click(function () {
            $(this).hide(); //关闭提示
        });
    });
4条评论
  1. 好冷哦~~~~




TOP