修改百度分享为本地分享(主要为了解决本地https访问http产生的警告问题)

  1. 进入界面:

<!DOCTYPE html>

<html>

 <head>

  <link rel="stylesheet" href="./css/normalize.css" />

  <link rel="stylesheet" href="./css/share_popup.css" />

  <link rel="stylesheet" href="./css/share_style.css" />

  <script src="./js/jquery-1.9.1.min.js"></script>

  <script src="./js/share.min.js" charset="UTF-8"></script>

  <script type="text/javascript" src="./js/jquery.qrcode.min.js"></script>

  <script type="text/javascript">

   sjson={

      
url:'https://www.ebaoquan.org/news/5'
,

      title:'新闻标题',

      pics:'http://6.su.bdimg.com/skin_plus/308.jpg?2'

   };

  </script>

 </head>

 <body>

  <div id="mpshare">

   <div class="bdsharebuttonbox bdshare-button-style1-24">

    <a title="分享到QQ空间" href="#" data-cmd="qzone"/>

    <a title="分享到新浪微博" href="#" data-cmd="tsina"/>

    <a title="分享到腾讯微博" href="#" data-cmd="tqq"/>

    <a title="分享到人人网" href="#" data-cmd="renren"/>

    <a title="分享到微信" href="#" data-cmd="weixin"/>

    <a title="分享到百度贴吧" href="#" data-cmd="tieba"/>

   </div>

  </div>

 </body>

</html>

2.share.js:

 /**
分享内容
reference bd_share;
*/
var sjson={url:'',title:'',pics:''};
$(function(){
    var cmd={
  'qzone':{"d":{"desc":"","summary":"",site:""},"u":"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey"},
  'tsina':{"d":{"appkey":"1343713053","searchPic":"true"},"u":"http://service.weibo.com/share/share.php"},
  'tqq':{"d":{"c":"share","a":"index","appkey":"801cf76d3cfc44ada52ec13114e84a96"},"u":"http://share.v.t.qq.com/index.php"},
  'renren':{"d":{"description":""},"u":"http://widget.renren.com/dialog/share"},
  'weixin':{"d":{},"u":""},
  'tieba':{"d":{"c":"share","a":"index","appkey":"801cf76d3cfc44ada52ec13114e84a96"},"u":"http://tieba.baidu.com/f/commit/share/openShareApi"}
 }
 $("#mpshare .bdsharebuttonbox a").click(function(){
     var type=$(this).attr("data-cmd");
  var t=cmd[type];
  var params={};
  if(type=='renren'){
     var rj={"resourceUrl":sjson.url,"srcUrl":sjson.url,"description":"","title":sjson.title,"pic":sjson.pics}
     params=$.extend({},t.d, rj);
  }else if(type=='weixin'){
     if($("#weixin_qrcode_dialog").size()==0){
         $("body").append("<div class=\"weixin_popup\" id=\"weixin_qrcode_dialog\" "+
                    "style=\"width: 240px; height: 300px; display: none;\" >"+
        "<div class=\"weixin_popup_head\"><span>分享到微信朋友圈</span>"+
        "<a class=\"weixin_popup_close\" onclick=\"return false;\" href=\"#\">×</a>"+
        "</div><div class=\"weixin_popup_main\" id=\"weixin_qrcode_dialog_qr\"></div>"+
        "<div class=\"weixin_popup_foot\">打开微信,点击底部的“发现”,<br>使用“扫一扫”即可将网页分享至朋友圈。</div></div>");
    
    $("#weixin_qrcode_dialog_qr").qrcode({ 
     render: "table",
     width:200,height:200,
     text: sjson.url,
     correctLevel: 2
    }).append("<img src='../share/img/icon.png' width='40' height='40' style='position:relative;top:-120px;right:-80px;' >");
    $(".weixin_popup_close").click(function(){
       $("#weixin_qrcode_dialog").hide();
    });
     }
      var winfo=getWinInfo();
   $("#weixin_qrcode_dialog").css({
     left: (winfo.winWidth-240)/2, 
     top:  (winfo.winHeight-300)/2  
   });
   $("#weixin_qrcode_dialog").show();
  }else{
     params=$.extend({},t.d, sjson);
  }
  var s="";var i=0;
  $.each(params,function(k,v){
   if(i>0)s+="&";else i++;
   s+=k+'='+encodeURIComponent(v);
  })
  if(s.length>0){
   window.open(t.u+"?"+s);
  }
 });
}); 
function getWinInfo(){
    var info={};
 if (window.innerWidth)
  info.winWidth = window.innerWidth;
 else if ((document.body) && (document.body.clientWidth))
  info.winWidth = document.body.clientWidth;
 if (window.innerHeight)
  info.winHeight = window.innerHeight;
 else if ((document.body) && (document.body.clientHeight))
  info.winHeight = document.body.clientHeight;
 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
 {
  info.winHeight = document.documentElement.clientHeight;
  info.winWidth = document.documentElement.clientWidth;
 }
 return info;
}

效果如下:

093003_nnoz_96845.jpg

360网盘:

http://yunpan.cn/cybq7trzRXRXq  提取码 d43c

转载于:https://my.oschina.net/yifanxiang/blog/367927

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值