JavaScript教程之javascript实现网页分享至朋友圈功能

当前位置:
首页 > 网站开发 > JavaScript教程 >

JavaScript教程之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>
栏目列表