快捷導(dǎo)航

教你如何自定義百度分享插件以及bshare分享插件的分享按鈕

更新時(shí)間：2014年06月20日 10:57:36 投稿：hebedich

在項(xiàng)目中我們常用到百度分享插件或者bshare分享插件，雖然官方都有自定義按鈕的功能，但是畢竟還是只有少數(shù)幾種，我們?nèi)绾蝸?lái)制作有自己特色的分享按鈕呢？

百度分享插件

<style>
  .userStyle{
    width:100%;
    height:30px;
    display:block;
  }
  .userStyle span.bds_more{
    background:url("/wap/images/rfhui1.jpg") no-repeat scroll 0 5px rgba(0, 0, 0, 0) !important;
  }
</style>
<div class="userStyle">
  <!-- Baidu Button BEGIN -->
  <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
    <span class="bds_more"></span>
  </div>
  <script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
  <script type="text/javascript" id="bdshell_js"></script>
  <script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
  </script>
  <!-- Baidu Button END -->
</div>

bShare分享插件

<div class="bsync-custom icon-medium-blue">
  <a title="一鍵分享到各大微博和社交網(wǎng)絡(luò)" class="bshare-bsync" onclick="javascript:bShare.more(event);return false;"></a>
</div>
<a class="bshareDiv" >分享按鈕</a>
<script 
    type="text/javascript" 
    charset="utf-8" 
    src="http://static.bshare.cn/b/buttonLite.js#uuid=773faa5d-cee1-4696-9c99-d400a5d7a1c1&amp;style=999&amp;img=http%3A%2F%2Fjingguan.365use.com%2Fwap%2Fimages%2Frfhui1.jpg&amp;h=20&amp;w=23&amp;mdiv=0&amp;pop=-1&amp;bp=qqmb,bsharesync,sinaminiblog,qzone,189share,sohuminiblog,renren,xinhuamb,tianya,shouji,ifengmb,neteasemb,qqxiaoyou,kaixin001,weixin,douban,qqim">
</script>

您可能感興趣的文章:

相關(guān)文章

JS處理下劃線的方法步驟
本文主要介紹了使用JavaScript處理下劃線,特別是在雙引號(hào)內(nèi)的下劃線不作為分隔符的情況,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
cypress中豐富的調(diào)試工具使用方法
這篇文章主要為大家介紹了cypress中豐富的調(diào)試工具及使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
微信小程序HTTP請(qǐng)求從0到1封裝
這篇文章主要給大家介紹了關(guān)于微信小程序HTTP請(qǐng)求從0到1封裝的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
uniapp?APP消息推送方案實(shí)現(xiàn)全過(guò)程
前段時(shí)間開發(fā)app的時(shí)候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
JS中的防抖與節(jié)流及作用詳解
這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過(guò)文字說(shuō)明加示例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
ES6 Promise對(duì)象概念與用法分析
這篇文章主要介紹了ES6 Promise對(duì)象概念與用法,簡(jiǎn)單分析了Promise對(duì)象的基本狀態(tài)與三種重要方法,并結(jié)合實(shí)例形式給出相關(guān)使用技巧,需要的朋友可以參考下
2017-04-04
通過(guò)js實(shí)現(xiàn)壓縮圖片上傳功能
這篇文章主要介紹了通過(guò)js實(shí)現(xiàn)壓縮圖片上傳功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
JS簡(jiǎn)單實(shí)現(xiàn)禁止訪問(wèn)某個(gè)頁(yè)面的方法
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)禁止訪問(wèn)某個(gè)頁(yè)面的方法,涉及基本的頁(yè)面跳轉(zhuǎn)操作技巧,需要的朋友可以參考下
2016-09-09
微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
uniapp實(shí)現(xiàn)單選框的示例代碼
本文給大家介紹uniapp實(shí)現(xiàn)單選框的示例代碼,采用uniapp-vue3實(shí)現(xiàn)的一款單選框組件,提供絲滑的動(dòng)畫選中效果,支持不同主題配置,適配web、H5、微信小程序,感興趣的朋友跟隨小編一起看看吧
2024-03-03