期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

帝国cms点赞代码

利用帝国cms的顶字段,实现赞一下。相关代码如下。保留备用。

html代码    

   <!--  点赞 begin  -->

   <div id="like" class="loading">

    <div class="bdlikebutton bdlikebutton-green bdlikebutton-medium bdlikebutton-medium-green"  data-id="[!--id--]" data-classid="[!--classid--]">

        <div class="bdlikebutton-inner">

            <span class="bdlikebutton-add">+1</span>

            <div class="bdlikebutton-count">100</div>

            <div class="bdlikebutton-text">赞一下</div>

        </div>

    </div><!--  点赞 end  -->

css代码

/* dian  zan   */

.bdlikebutton {

    background: url(http://bdimg.share.baidu.com/static/images/like.png?cdnversion=20120824) no-repeat;

    position: relative;

    cursor: pointer;

    text-align: center;

    font-size: 12px;

}

.bdlikebutton-green {

    color: #127B03;

}

.bdlikebutton-medium {

    width: 105px;

    height: 51px;

}

 

.bdlikebutton-medium-green {

    background-position: 0 -230px;

}

.bdlikebutton-inner {

    overflow: hidden;

}

.bdlikebutton-add {

    display: none;

    position: absolute;

    top: 0;

    left: 50%;

    z-index: 10002;

    font-size: 20px;

    font-weight: 700;

}

 

.bdlikebutton-medium .bdlikebutton-count {

    margin-top: 8px;

    padding: 2px 0 0 20px;

    line-height: 15px;

    background: url(http://bdimg.share.baidu.com/static/images/like.png?cdnversion=20120824) no-repeat;

    display: inline-block;

}

 

.bdlikebutton-medium-green .bdlikebutton-count {

    background-position: -280px -60px;

}

.bdlikebutton-medium .bdlikebutton-text {

    line-height: 22px;

}

.bdlikebutton-medium-green-hover .bdlikebutton-count{background-position:-280px -660px;}

.bdlikebutton-medium-green-hover{background-position:-110px -230px;color:#FFF;}

js代码:

// 赞一下

(function ($) { 

    $.extend({ 

        tipsBox: function (options) { 

            options = $.extend({ 

                obj: null,  //jq对象,要在那个html标签上显示 

                str: "+1",  //字符串

                startSize: "12px",  //动画开始的文字大小 

                endSize: "30px",    //动画结束的文字大小 

                interval: 900,  //动画时间间隔 

                color: "red",    //文字颜色 

                callback: function () { }    //回调函数 

            }, options); 

            $("body").append("<span class='num'>" + options.str + "</span>"); 

            var box = $(".num"); 

            var left = options.obj.offset().left + options.obj.width() / 2; 

            var top = options.obj.offset().top - options.obj.height(); 

            box.css({ 

                "position": "absolute", 

                "left": left + "px", 

                "top": top + "px", 

                "z-index": 9999, 

                "font-size": options.startSize, 

                "line-height": options.endSize, 

                "color": options.color 

            }); 

            box.animate({ 

                "font-size": options.endSize, 

                "opacity": "0", 

                "top": top - parseInt(options.endSize) + "px" 

            }, options.interval, function () { 

                box.remove(); 

                options.callback(); 

            }); 

        } 

    }); 

})(jQuery); 

    $(function(){

                var id=$('.bdlikebutton').attr('data-id'); var classid=$('.bdlikebutton').attr('data-classid');

                $.get("/e/public/ViewClick/", { id: id, classid: classid,down:"5" },

              function(data){

                $('.bdlikebutton-count').text(data);

         });

        $('.bdlikebutton').on({

            mouseover : function(){

                        $(this).addClass("bdlikebutton-medium-green-hover");

            } ,

            mouseout : function(){

                    $(this).removeClass("bdlikebutton-medium-green-hover");

                                        $('.bdlikebutton-text').text('赞一下');

            } ,

            click: function(){

                    $.get("/e/public/digg/?", { id: id, classid: classid,dotop:"1",doajax:"1" },

              function(data){

                                 if(data.indexOf("提交过") >= 0 ) { 

                                            $('.bdlikebutton-text').text('已赞过');

                                  } else{

                                            $('.bdlikebutton-count').text( parseInt($('.bdlikebutton-count').text())+1);

                                           $.tipsBox({obj: $('.bdlikebutton').eq(0), str: "+1", callback: function () {} }); 

 

                                  }

                 

             });

            }

        }) ;

                

    }) ;

效果

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册