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

    选择打赏方式

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

源码下载

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

插件下载

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



pre1.png

pre2.png


下面贴出代码吧    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 */

});

 欢迎各位土豪打赏本站。

版权声明:若无特殊注明,本文皆为《 CM部落 》原创,转载请保留文章出处。
本文链接:BLOG百度打赏插件[美化版] https://www.itkz.cn/tools/DaShang-plgin.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框

吃奶的力气提交吐槽中...

已有6条吐槽

匿名

2017-07-03 04:08 福建省福州市联通
本人小白,插件怎么安装不了
 GNU/Linux x64   MiuiBrowser 8.9.4

逍遥

2017-04-14 17:16 河南省洛阳市移动
貌似失效了,我点击‘赏’无效果,怎么回事? face
 Windows 10 x64   Opera 44.0.2510.857

匿名

2016-10-03 16:54 广东省东莞市铁通
插件密码错误,大哥给个密码 国庆快乐啦
 Windows 10 x64   Google Chrome 45.0.2454.101

匿名

2016-09-28 19:32 安徽省合肥市移动
插件启用后显示54行错误,本人小白,不知道怎么弄
 Windows 7   Google Chrome 45.0.2454.101

失心博客

2016-08-21 21:36 浙江省金华市移动
博主文章写的很好,已经转载了
 Windows 7 x64   QQBrowser 9.4.8699.400

琉璃博客网

2017-02-11 04:00 江西省南昌市鹏博士长城宽带
@失心博客:不错哦,拿去用了
 Lenovo A320t   Google Chrome 30.0.0.0