基于CSS3實現點擊展開分享按鈕代碼



34 135 46



特效描述:基于CSS3實現 點擊展開 分享按鈕代碼,基于CSS3實現點擊展開分享按鈕代碼

代碼結構

1. 引入CSS

<link href="css/zzsc.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script src='js/jquery.min.js'></script>
<script src='js/share.js'></script>

3. HTML代碼

  <div class='share-button share-button-top'></div>
  <div class='share-button share-button-left'></div>
  <div class='share-button share-button-bottom'></div>
  <div class='share-button share-button-bottom'></div>
  <script>
    $(function(){
      $('.share-button-top').share({
        title: 'Share Button Mutiple Element Test',
        image: 'http://carrot.is/img/fb-share.jpg',
        app_id: '602752456409826',
        background: 'rgba(255,255,255,.5)',
        color: '#3B2B45',
        flyout: 'top center'
      });
      $('.share-button-left').share({
        title: 'Share Button Multiple Instantiation Test',
        image: 'http://carrot.is/img/fb-share.jpg',
        app_id: '602752456409826',
        background: 'rgba(255,255,255,.5)',
        color: '#3B2B45',
        flyout: 'bottom left'
      });
      $('.share-button-bottom').share({
        title: 'Share Button Multiple Instantiation Test',
        image: 'http://carrot.is/img/fb-share.jpg',
        app_id: '602752456409826',
        background: 'rgba(255,255,255,.5)',
        color: '#3B2B45',
        flyout: 'top right'
      });
    });
  </script>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 Tooltip工具提示框 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子