响应式社会化分享按钮

简介:

目前绝大多数网站都使用了社会化分享按钮,即使是一个简单的专题页都会使用上,这样做,无非就是想做到让让用户更便捷的分享自己认为不错的内容,到各大社交平台等。社会化分享按钮似乎已经成为一个网站或者专题页面的标配,那么如何去添加这样的分享按钮呢?这里就分享给大家一个响应式社会化分享按钮(RRSSB)代码,即使用在手机端也得到很好的显示效果哦。

responsive-social-share-buttons

RRSSB使用SASS编写,所以你可以很方便的改里面的样式。下面是使用方法:

使用教程

STEP1: 嵌入样式表和JS文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="js/rrssb.min.js"></script><link rel="stylesheet" href="css/rrssb.css" />

STEP2: 分享按钮使用无序列表<ul>编写,然后加上.rrssb-buttons样式

 <ul class="rrssb-buttons clearfix"> <li class="email"> ... </li> <li class="facebook"> ... </li> ... <li class="googleplus"> ...</li> </ul>

兼容性

  • 测试分辨率在140px – 15465px
  • IE9+
  • 其它流行的浏览器(Firefox, Chrome, Safari, Opera等…)
在线演示 |  下载地址(Github)
怎么样是不是觉得很不错呢?对了,最后提醒一下,因为google在天朝遭到屏蔽所以涉及到的google的JS,大家可以先下载下来放至本地,或者用新浪的JS来代替
目录
相关文章
|
5月前
|
JSON 小程序 JavaScript
微信小程序瀑布流组件
微信小程序瀑布流组件
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
|
4月前
|
数据库
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
119 0
|
5月前
|
小程序 JavaScript
微信小程序(二十三)微信小程序左上角返回按钮触发事件
返回上一页按钮只会触发上一页的onShow生命周期函数,并不会触发onLoad函数。 因此我们需要在onShow函数中做一些设置: 大概是操作流程,从日程页跳转至实验列表页,再点击实验列表页 左上角的返回键,返回日程页重新获取页面数据。 我这里直接上代码: 实验列表页代码:
294 0
微信小程序(二十三)微信小程序左上角返回按钮触发事件
|
7月前
|
小程序
uniapp悬浮图标支持拖动支持微信小程序
uniapp悬浮图标支持拖动支持微信小程序
|
9月前
|
弹性计算 前端开发 JavaScript
如此丝滑的按钮交互效果
如此丝滑的按钮交互效果
44 0
|
10月前
|
前端开发 定位技术 容器
百度地图高级开发:上滑推拉菜单CSS解决方案
百度地图高级开发:上滑推拉菜单CSS解决方案
50 0
|
10月前
|
C# Android开发
Blazor如何实现类似于微信的Tab切换?
Blazor如何实现类似于微信的Tab切换?
67 0
|
10月前
|
小程序 JavaScript
微信小程序选项卡页面切换
微信小程序选项卡页面切换
269 0
|
11月前
|
小程序 JavaScript Python
微信小程序|上下滚动页面实现
微信小程序|上下滚动页面实现
525 0