网页分享功能 支持 微信二维码 qq空间 qq好友 新浪微博 百度贴吧 豆瓣 人人...
2024-05-12 16:54:49
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>网页分享功能</title> <style type="text/css">body{margin: 0;} .m-pop-bg{position: fixed;width: 100%;top: 0;bottom: 0;right: 0;overflow: auto; background-color: rgba(0,0,0,0.6);z-index: 9999;}.m-pop{position:absolute;left:50%;top:50%;width: 320px; height: 310px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background-color:#fff;border-radius:4px;}.m-pop-img{margin-top: 30px;text-align: center;}.m-pop-footer{text-align: center;}</style>
</head>
<body> <div id="m-share"><button id="m-wechat">微信二维码</button><button id="m-qzone">qq空间</button><button id="m-qq">qq好友</button><button id="m-weibo">新浪微博</button><button id="m-tieba">百度贴吧</button><button id="m-douban">豆瓣</button><button id="m-renren">人人</button></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> $(function() {var initShare = function() {$('#m-share').on('click', 'button', function(){var that = $(this), conf = {},name, title, summary, shareChannel, shareData = {};var shareUrl = 'https://www.baidu.com/';var gname = '快来看我投资的《官居几品》';var summary = '我投资的作品，怎么可能不好看，免费资格送给你，快来体验吧！';var img = 'http://coursecdn.cgyouxi.com/j/images/logo.png?v=20170804';if(that.attr('id') === 'm-wechat'){name = 'wechat';shareChannel = 4;shareData = {url: shareUrl,cid: '',btn_type: 'flash'}} else if (that.attr('id') === 'm-qzone'){name = 'qzone';shareChannel = 2;shareData = {url : shareUrl,title: gname,desc: '超带感，根本停不下来！',summary: summary,img: img}} else if (that.attr('id') === 'm-qq'){name = 'qq';shareChannel = 3;shareData = {url : shareUrl,title: gname,desc: '',summary: summary,img: img}} else if (that.attr('id') === 'm-weibo') {name = 'weibo';shareChannel = 1;shareData = {url: shareUrl,title: gname,desc: '超带感，根本停不下来！',summary: summary, img: img}} else if (that.attr('id') === 'm-tieba') {name = 'tieba';shareChannel = 6;shareData = {url: shareUrl,title: gname,desc: '超带感，根本停不下来！',summary: summary, img: img}} else if (that.attr('id') === 'm-douban') {name = 'douban';shareChannel = 7;shareData = {url: shareUrl,title: gname,desc: '超带感，根本停不下来！',summary: summary, img: img}} else if (that.attr('id') === 'm-renren') {name = 'renren';shareChannel = 8;shareData = {url: shareUrl,title: gname,desc: '超带感，根本停不下来！',summary: summary, img: img}}conf = {platForm: 0,shareChnnel: shareChannel};myShare(name, shareData, conf);if ($('#qrdiv').length > 0) {$('#qrdiv').css({'position': 'fixed'});}});};var init = function() {initShare();}(); var config = {'weibo': 'http://service.weibo.com/share/share.php?title=#TITLE#&appkey=1343713053&pic=#PIC#&searchPic=false','qzone': 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=#URL#&showcount=1&desc=#DESC#&summary=#SUMMARY#&title=#TITLE#&site=橙光中心&pics=#PIC#&style=203&width=98&height=22','wechat': {cid: '', gindex: '', btn_type: ''},'tieba': 'http://tieba.baidu.com/f/commit/share/openShareApi?url=#URL#&title=#TITLE#&desc=&comment=&pic=#PIC#','qq': 'http://connect.qq.com/widget/shareqq/index.html?url=#URL#&title=#TITLE#&desc=#DESC#&summary=#SUMMARY#&site=www.66rpg.com&pics=#PIC#','douban': 'http://www.douban.com/share/service?href=#URL#&name=#TITLE#&text=#SUMMARY#&image=#PIC#','renren': 'http://widget.renren.com/dialog/share?resourceUrl=#URL#&srcUrl=&title=#TITLE#&pic=#PIC#&description=#SUMMARY#',};var orgShare = {share: function(name, obj, conf){if(name != 'wechat'){if(name == 'weibo'){var url = config[name].replace('#TITLE#', encodeURIComponent(obj.title)).replace('#DESC#', encodeURIComponent(obj.desc)).replace('#SUMMARY#', encodeURIComponent(obj.summary)).replace('#PIC#', encodeURI(obj.img));} else {var url = config[name].replace('#URL#', obj.url).replace('#TITLE#', encodeURIComponent(obj.title)).replace('#DESC#', encodeURIComponent(obj.desc)).replace('#SUMMARY#', encodeURIComponent(obj.summary)).replace('#PIC#', encodeURI(obj.img));}orgShare.openWindow(url);} else {orgShare.makeQRcode(obj);}},openWindow: function(url) {window.open(url, "", "width=700, height=680, top=" + (screen.height / 2 - 340) + ", left=" + (screen.width / 2 - 350) + ", toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no");return false;},makeQRcode: function(obj) {var html = '<div id="m-pop-bg" class="m-pop-bg">' +'<div id="m-pop" class="m-pop">' +'<div class="m-pop-img" ><img src="http://www.66rpg.com/redirect/make_code_url?size=6&url=https://www.baidu.com/"></div>' +'<div class="m-pop-footer">微信扫一扫即可分享给好友</div></div></div>';$('body').append(html);}};$(document).on("click", "#m-pop-bg", function () {$("#m-pop-bg").remove();})$(document).on("click", "#m-pop", function (e) {e.stopPropagation();e.preventDefault();})var myShare = orgShare.share; }); </script>
</body>
</html> 
转载于:https://www.cnblogs.com/xutongbao/p/9924897.html
网页分享功能 支持 微信二维码 qq空间 qq好友 新浪微博 百度贴吧 豆瓣 人人...相关推荐
- CSS实现鼠标经过网页图标弹出微信二维码
特点 1.纯CSS实现二维码展示功能,减少加载JS: 2.使用CSS3 transform 属性: ## 第一步 在需要展示二维码的地方添加如下代码,其中<a>标签内容可以根据需要修改成图 ...
- 微信功能介绍微信二维码，DIV宣传页
通用功能设置中包含了DIV宣传页设置,相册,投票等一系列一般企业常会用到的功能,通过这些功能提升企业形象,拉近客户沟通十分的方便快捷 传统企业的运营是极为单一,并且非常机械化的运营方式.另一方面,据调 ...
- 微信分享朋友圈链接怎么显示图片-企业微信二维码转成名片
一.背景 在移动端业务开发的中,很多时候会进行h5页面的分享操作,但是原生的微信分享效果并不能满足我们业务的需求,如下图: 企业微信二维码转成名片 我们可以看的原生的分享描述是一个页面链接,分享图标也 ...
- Opencv4.5.1 微信二维码识别功能 QRCode 编译与使用 C++
日常生活中手机摄像头最常用的功能可能就是扫码了,而且大部分使用微信扫码,微信扫码的功能的确很强大,精度高.速度快.微信扫码近来加入了opencv开源项目了.现特地进行了尝试,并记录了整个过程,以上动图 ...
- 微信二维码1-服务号推广（将网页存储为图片存储到服务器）
本周预告了将会推出一个「将会讲讲项目中关于微信二维码生成和传播的事儿」的系列,现在我们就来开始讲讲: 首先本篇不会将会怎么调用二维码接口,因为该接口已经在上个月就写好了,在实际项目中,不过这个是微信二 ...
- 小程序识别企业微信二维码功能
实现思路 长按识别第一时间想到了wx.previewImage(Object object, boolean showmenu) 在新页面中全屏预览图片.预览的过程中用户可以进行保存图片.发送给朋友等 ...
- CSS 网页弹出微信二维码
1.在HTML中添加需要弹出的位置 在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等.例如"查看我的微信". href="javascript:& ...
- 网站点击弹窗微信二维码功能纯CSS
复制粘贴下边代码,根据需要更换图片路径,以及css. <html> <head> <style> body { text-align:center; } .w ...
- Day212.OAuth2、微信二维码登入注册功能、用户登录信息前后端供、讲师列表前后端 -谷粒学院
谷粒学院 OAuth2的使用场景 一.OAuth2解决什么问题 1.OAuth2提出的背景 照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源 2.图例 资源拥有者:照片拥有者 ...
最新文章
- 掏空老底，值得推荐的10个学习神器，总有一个用得上！
- AJAX 跨域请求（转发）
- 【干货】Linux中实用但很小众的11个炫酷终端命令
- python框架django的数据库的正向生成和反向生成
- fiddler手机模拟器抓包_利用Fiddler对Android模拟器网络请求进行抓包
- 分类与回归机器学习模型的评价指标
- FX Composer 2 中文版快速教程
- c执行cmd pdf2swf_PDF在线翻阅开发经验（FlexPaper+SWFTools+SaveAsPDFandXPS）【转】
- 大数据Hadoop学习（一）入门
- 电脑怎么打印pdf文件,电脑中保存的pdf文件怎么打印
- 《SolidWorks 2014中文版机械设计从入门到精通》——第 1 章 认识SolidWorks 1.1 SolidWorks概述...
- 中国 GitHub 霸榜乱象！ 国内程序员的脸都被丢尽了！
- LAMMPS应用：LAMMPS模拟冲击压缩
- 日清日结工作方法简介(OEC)
- python输出数学公式_高数计算，我Python替你承包了
- 自动爬取bilibi小视频
- Latex实现框内强制换行
- Analys 版本历史
- 软件开发中的上游upstream
- Django @csrf_exempt不适用于基于通用视图的类(Django @csrf_exempt does not work on generic view based class)...