BLOG百度打赏插件[美化版]

首页 » 小工具 » 2016年3月15日下午百度已收录

选择打赏方式

插件比之于百度打赏更漂亮,加入了sshake和Animate等动画集,且不含任何外链,SSL必选。话不多说上图。

源码下载

下载地址：http://pan.baidu.com/s/1sksBgLZ 密码: thff

插件下载

下载地址：http://pan.baidu.com/s/1dE6P7o9 密码: bqig

下面贴出代码吧 PS：（代码比较粗苯,欢迎指点。）

插件需要集成

Jquery

font-awesome

animate

CSS Shake

PS：（可以精简的。）

主体HTML代码：

<!--Start DaShang-->
<div class="dashang_wenzi">
<p class="shake-slow shake-constant">喵，打赏1块，给我加喵星人买个罐头吧~</p>
    <div id="dashang">赏</div>
    </div>

    <div id="dashagn_tanchu">
    <div id="dashang_bg" class="guanbi"></div>
    <div id="dashang_body"  class="guanbi">
    	<a id="dashang_gb"><i class="fa fa-times" style="float: right;margin: 15px 20px 0 0;opacity: .4;"></i></a>
    	<h3 style="text-align:left;font-size:15px;font-weight:700;margin:25px 0 0 15px;color:#555;font-weight: bold;font-family: 'Microsoft Yahei'">打赏支付方式：</h3>
        <div class="myway">
        <label for="dashang_img_baidu"><input type="radio"  name="payway" id="dashang_img_baidu">百度钱包</label>
        <label for="dashang_img_alipay"><input type="radio" name="payway" id="dashang_img_alipay" checked="checked" >支付宝</label>
        <label for="dashang_img_weixin"><input type="radio" name="payway" id="dashang_img_weixin">微信钱包</label>
        <div id="dashang_img" class="dashang_img dashang_img_alipay">
        
        </div>
        </div>
    </div>
</div>
    <!--End DaShang-->

CSS样式代码：

#dashang{border-radius:90px;background-color:#FEC22C;width:60px;height:60px;font-size:40px;text-align:center;font-family:\5FAE\8F6F\96C5\9ED1,\5b8b\4f53;color:#fff;text-decoration:none;margin:auto}
#dashang_gb{cursor:pointer}
.dashang_bg{position:absolute;background:#000;z-index:9999;-moz-opacity:.3;filter:alpha(opacity=30);opacity:.3;left:0;top:0;width:100%;height:100%}
.dashang_body{z-index:10000;width:390px;height:380px;top:50%;left:50%;margin:-190px 0 0 -195px;position:absolute;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#fff;box-shadow:2px 5px 15px rgba(0,0,0,.8)}
.myway{margin:20px}
.myway label{cursor:pointer;font-weight:400;display:inline-block;font-size:14px;margin:0 30px 0 0;padding:0}
.myway input[type=radio]{vertical-align:middle;margin:-2px 5px 0 0}
.dashang_img{margin:7% 15.5%;text-align:center;width:230px;height:230px}
.guanbi{display:none}
.kaiqi{display:block}
.dashang_img_baidu{background:url(images/baidu.png);background-size:230px}
.dashang_img_alipay{background:url(images/alipay.png);background-size:230px}
.dashang_img_weixin{background:url(images/weixin.png);background-size:230px}
.dashang_wenzi{font-family:"microsoft yahei";text-align:center;background:#f1f1f1;padding:10px 0;color:#666;margin:20px auto;width:90%;border-radius:15px}
#dashangtanchu {width: 100%;height: 100%;position:fixed;top:0;left:0;}

JQuery动画效果代码：

$(document).ready(function () {

/* DaShang Start */
$('#dashang').hover  (function () {
    $('#dashang').addClass("wobble animated");
    setTimeout(function(){
        $('#dashang').removeClass("wobble");
        },800);

});


$('#dashang').click  (function () {
    $('#dashang_bg').addClass("dashang_bg");
    $('#dashang_bg').removeClass("guanbi");
    $('#dashang_body').addClass("dashang_body");
    $('#dashang_body').removeClass("guanbi");
    $('#dashang_body').addClass("swing animated");

});

$('#dashang_gb').click  (function () {
    $('#dashang_body').addClass("bounceOutDown animated");
    
    setTimeout(function(){  
    $('#dashang_body').removeClass("bounceOutDown");
    $('#dashang_body').addClass("guanbi");
        $('#dashang_bg').addClass("guanbi");
    },800);
    

});

$('#dashang_img_alipay').click  (function () {
    $('#dashang_img').removeClass("dashang_img_baidu");
    $('#dashang_img').removeClass("dashang_img_weixin");
    $('#dashang_img').addClass("dashang_img_alipay");
    $('#dashang_img').addClass("flipInX animated");
     setTimeout(function(){
        $('#dashang_img').removeClass("flipInX");
        },800);

})
$('#dashang_img_baidu').click  (function () {
    $('#dashang_img').removeClass("dashang_img_weixin");
    $('#dashang_img').removeClass("dashang_img_alipay");
    $('#dashang_img').addClass("dashang_img_baidu");
    $('#dashang_img').addClass("flipInX animated");
     setTimeout(function(){
        $('#dashang_img').removeClass("flipInX");
        },800);

})
$('#dashang_img_weixin').click  (function () {
    $('#dashang_img').removeClass("dashang_img_baidu");
    $('#dashang_img').removeClass("dashang_img_alipay");
     $('#dashang_img').addClass("dashang_img_weixin");
     $('#dashang_img').addClass("flipInX animated");
     setTimeout(function(){
        $('#dashang_img').removeClass("flipInX");
        },800);
})
/* DaShang End */

});

欢迎各位土豪打赏本站。