html5 页面分享功能(微信、新浪微博、QQ)

 <div class="new_sharebtnbox" data-tag="share">
     <a class="new_box new_wechat" data-cmd="wechat"></a>
     <a class="new_box new_weibo " data-cmd="weibo"></a>
     <a class="new_box new_qq" data-cmd="qzone"></a>
 </div>
 <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
 <script>
     var fg = true; //防止微信二维码重复生成的bug
     var path = window.document.location.href;
     var tle = $('.new_title').text();
     //var path = "https://baidu.com";
     var ShareTip = function() {};
     //1、微信
     $('.new_wechat').click(function () {
          $('.new_qrcode').fadeIn(500);
          if(fg){
             $("#qrcode").qrcode({
                text: path,       //设置二维码内容
                pic: "https://baidu.com/xxx1.png",
                render: "table", //设置渲染方式
                width: 200,       //设置宽度,默认生成的二维码大小是 256×256
                height: 200,      //设置高度
                margin: "auto",
                typeNumber: -1,   //计算模式
                background: "#fff", //背景颜色
                foreground: "#000" //前景颜色
              });
            }
            fg = false;
       });
       $('.new_close').click(function () {
           $('.new_qrcode').fadeOut(500);
       });
      //2、新浪微博
       ShareTip.prototype.sina = function(title, url, picurl) {
            var sharesinastring = 'http://v.t.sina.com.cn/share/share.php?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl;
            window.open(sharesinastring, 'newwindow', 'height=300,width=300,top=100,left=100');
       };
       $('.new_weibo').click(function () {
           let sh1 = new ShareTip();
           sh1.sina(tle, window.location.href, "https://baidu.com/xxx1.png");
       });
      //3、QQZone
      ShareTip.prototype.qqzone = function(title, url, picurl) {
          var shareqqzonestring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + title + '&url=' + url + '&pics=' + picurl;
          window.open(shareqqzonestring, 'newwindow', 'height=300,width=300,top=100,left=100');
      };
      $('.new_qq').click(function () {
           let sh2 = new ShareTip();
           sh2.qqzone(tle, window.location.href, "https://baidu.com/xxx1.png");
      });
  </script>

参考:https://www.cnblogs.com/shuangjiang/p/9524588.html

### HTML 登录页面集成 QQ 微信 新浪微博 图标 在构建HTML登录页面时,可以使用图标来表示不同的第三方登录选项。这些图标的引入可以通过链接外部资源库(如Font Awesome)或直接嵌入本地图片文件的方式完成。 #### 方法一:使用 Font Awesome 图标字体库 这是一种较为简便的方法,只需在项目中引入Font Awesome CSS 文件即可轻松调用所需图标: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Third Party Login</title> <!-- 引入Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/> </head> <body> <div class="login-buttons"> <button type="button"><i class="fab fa-weibo"></i> 使用新浪微博登录</button><br/> <button type="button"><i class="fab fa-qq"></i> 使用QQ登录</button><br/> <button type="button"><i class="fab fa-weixin"></i> 使用微信登录</button> </div> <style> .login-buttons button { width: 200px; height: 40px; margin-bottom: 10px; } </style> </body> </html> ``` 这种方法的优点在于维护方便,更新及时,并且能够保持样式的一致性和简洁性[^1]。 #### 方法二:自定义图像作为按钮背景 如果希望拥有更高的定制化程度,则可以选择上传具体的社交媒体logo图片并设置为按钮的背景图像。这种方式允许更精确地控制显示效果,但同时也增加了管理成本。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Social Media Login Buttons</title> <style> .social-login-btn { display: inline-block; padding: 10px 20px; border-radius: 5px; cursor: pointer; background-size: contain; background-repeat: no-repeat; background-position: center; text-align: center; color: white; font-weight: bold; line-height: 30px; /* 调整此值以适应不同大小的文字 */ } #weiboLoginBtn {background-image:url('path_to_weibo_icon.png'); } #qqLoginBtn {background-image:url('path_to_qq_icon.png'); } #wechatLoginBtn {background-image:url('path_to_wechat_icon.png'); } </style> </head> <body> <button id="weiboLoginBtn" class="social-login-btn">Weibo</button><br/><br/> <button id="qqLoginBtn" class="social-login-btn">QQ</button><br/><br/> <button id="wechatLoginBtn" class="social-login-btn">WeChat</button> </body> </html> ``` 请注意,在实际部署前需替换`'path_to_*_icon.png'`为真实的路径地址[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逸曦穆泽

您的鼓励是我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值