|
利用帝国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);
效果见网站： http://www.wenxuewang.cn/wenxue/sanwen/148971.html
|
