其他 之网站分享插件
时间:2019-06-12
本文章向大家介绍其他 之网站分享插件,主要包括其他 之网站分享插件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <title>微信,QQ分享插件</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div class="kePublic"> <!--效果html开始--> <style type="text/css"> .bdsharebuttonbox a { width: 60px!important; height: 60px!important; margin: 0 auto 10px!important; float: none!important; padding: 0!important; display: block; } .bdsharebuttonbox a img { width: 60px; height: 60px; } .bdsharebuttonbox .bds_tsina { background: url(images/gbRes_6.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_qzone { background: url(images/gbRes_4.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_tqq { background: url(images/gbRes_5.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_weixin { background: url(images/gbRes_2.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_sqq { background: url(images/gbRes_3.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_renren { background: url(images/gbRes_1.png) no-repeat center center/60px 60px; } .bd_weixin_popup .bd_weixin_popup_foot { position: relative; top: -12px; } </style> <div class="gb_resLay"> <div class="gb_res_t"><span>分享到</span><i></i></div> <div class="bdsharebuttonbox"> <ul class="gb_resItms"> <li> <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin" ></a>微信好友 </li> <li> <a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq" ></a>QQ好友 </li> <li> <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone" ></a>QQ空间 </li> <li> <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq" ></a>腾讯微博 </li> <li> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina" ></a>新浪微博 </li> <li> <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren" ></a>人人网 </li> </ul> </div> </div> <script type="text/javascript"> //全局变量,动态的文章ID var ShareURL = ""; //绑定所有分享按钮所在A标签的鼠标移入事件,从而获取动态ID $(function () { $(".bdsharebuttonbox a").mouseover(function () { ShareURL = $(this).attr("data-url"); }); }); /* * 动态设置百度分享URL的函数,具体参数 * cmd为分享目标id,此id指的是插件中分析按钮的ID *,我们自己的文章ID要通过全局变量获取 * config为当前设置,返回值为更新后的设置。 */ function SetShareUrl(cmd, config) { if (ShareURL) { config.bdUrl = ShareURL; } return config; } //插件的配置部分,注意要记得设置onBeforeClick事件,主要用于获取动态的文章ID window._bd_share_config = { "common": { onBeforeClick: SetShareUrl, "bdSnsKey": {}, "bdText": "" , "bdMini": "2", "bdMiniList": false, "bdPic": "http://assets.jq22.com/plugin/2017-05-24-18-14-49.png", "bdStyle": "0", "bdSize": "24" }, "share": {} }; //插件的JS加载部分 with (document) 0[(getElementsByTagName('head')[0] || body) .appendChild(createElement('script')) .src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; </script> <!--效果html结束--> </body> </html>
效果如图:
链接:https://pan.baidu.com/s/1UuhBtByr_kvBria1Lt8tAA
提取码:yg5z
百度分享按钮
<div style="padding-left: 50px;" class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> </div> <script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; </script>
效果图:
原文地址:https://www.cnblogs.com/yang-2018/p/11010896.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker开启Remote API 访问 2375端口
- Docker实用debug调试技巧锦集
- shell 命名管道,进程间通信, ncat作http server
- Linux atop监控
- go modules中使用replace用法
- 分布式文件系统Ceph的挂载方式
- 在CentOS 7上挂载CephFS
- Qt音视频开发14-mpv读取和控制
- 深入理解Nginx的rewrite模块
- max os 安装各种问题/Error解决方法
- 不要启用 net.ipv4.tcp_tw_recycle
- 利用SSH(无密码)免登录来节省你的生命
- 深入linux下磁盘Disk,分区Partition,挂载Mount
- 净化Git之rebase变基的使用
- Linux内存管理 一个进程究竟占用多少空间?-VSS/RSS/PSS/USS