javascript实现网页分享至朋友圈功能
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 #WX { 9 width: 231px; 10 height: 285px; 11 background: red; 12 padding: 10px; 13 background: #fff; 14 border: solid 1px #d8d8d8; 15 position: fixed; 16 top: 0; 17 left: 0; 18 right: 0; 19 bottom: 0; 20 margin: auto; 21 } 22 23 .bd_weixin_popup_head { 24 font-size: 12px; 25 font-weight: bold; 26 text-align: left; 27 line-height: 16px; 28 height: 16px; 29 position: absolute; 30 color: #000; 31 } 32 33 .bd_weixin_popup_head span { 34 font-size: 12px; 35 font-weight: bold; 36 text-align: left; 37 line-height: 16px; 38 } 39 40 .bd_weixin_popup_close { 41 width: 16px; 42 height: 16px; 43 text-decoration: none; 44 font-size: 16px; 45 text-align: right; 46 position: absolute; 47 right: 0; 48 top: 0; 49 cursor: pointer; 50 } 51 52 .bd_weixin_popup_foot { 53 font-size: 12px; 54 text-align: left; 55 line-height: 22px; 56 color: #666; 57 } 58 59 #weixin { 60 width: 185px; 61 height: auto; 62 margin: 10px auto; 63 } 64 </style> 65 </head> 66 67 <body> 68 <div id="WX"> 69 <div class="bd_weixin_popup_head"> 70 <span>分享到微信朋友圈</span> 71 <a class="bd_weixin_popup_close">×</a> 72 <div id="weixin"></div> 73 <div class="bd_weixin_popup_foot">打开微信，点击底部的“发现”，<br>使用“扫一扫”即可将网页分享至朋友圈。</div> 74 </div> 75 </div> 76 </body> 77 <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> 78 <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> 79 <script type="text/javascript"> 80 var path = window.location.href;//获取页面的链接 81 $("#weixin").qrcode({ 82 text: path, //设置二维码内容 83 // render: "table", //设置渲染方式 84 width: 185, //设置宽度,默认生成的二维码大小是 256×256 85 height: 185, //设置高度 86 typeNumber: -1, //计算模式 87 background: "#ffffff", //背景颜色 88 foreground: "#000000" //前景颜色 89 }); 90 </script> 91 92 </html>
