任何人都可以解释一下这个page中的按钮是如何工作的吗?快速喜欢Tumblr上的按钮
正如你所看到的,一旦整个页面加载完成,悬停在文章或图片上会显示一些按钮,包括一个像按钮(心脏形状在左下角)。
任何人都可以解释它是如何工作的?我一直试图找出一段时间,尝试在源代码上的脚本,但无济于事。
任何人都可以解释一下这个page中的按钮是如何工作的吗?快速喜欢Tumblr上的按钮
正如你所看到的,一旦整个页面加载完成,悬停在文章或图片上会显示一些按钮,包括一个像按钮(心脏形状在左下角)。
任何人都可以解释它是如何工作的?我一直试图找出一段时间,尝试在源代码上的脚本,但无济于事。
这是我在源代码中发现的,这意味着div的链接像按钮和reblog按钮只是硬编码和隐藏与CSS。正如你所看到的,当你将鼠标悬停在元素上时,会有一个css块。所以它只是CSS。
编辑: 我加了一个帖子的HTML代码,你可以看到有一对夫妇的div与类永久
CSS代码
/* CLAW */
.claw .permalink {height: 60px; width: 60px; margin-bottom: -60px; position: relative; background-repeat: no-repeat; background-position: -31px -31px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.claw .permalink:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: alpha(opacity=85);
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
.claw.permalink {display: none;}
.claw .claw.permalink {display: block!important;}
.post-shell.claw:hover .perma-link {background-position: 0px 0px;}
.post-shell.claw:hover .perma-source {background-position: -62px 0px;}
.post-shell.claw:hover .perma-like {background-position: 0px -62px;}
.post-shell.claw:hover .perma-reblog {background-position: -62px -62px;}
.claw .perma-link {margin-left: 12px;}
.claw .perma-source {margin-right: 12px; float: right;}
.claw .perma-reblog {margin: -60px 0 0 0; float: right;}
.claw .perma-like {margin: -60px 0 0 0;}
HTML代码一个职位的:
<div class="post-shell claw">
<a href="http://cicerontheme.tumblr.com/post/7703094650" title="posted 5 months ago with 178 notes"><div class="permalink claw perma-link"></div></a>
<a href="http://amarisha.tumblr.com/post/5376110038" title="reblogged from amarisha"><div class="permalink claw perma-source"></div></a>
<div class="post photo" id="7703094650" rel="http://www.tumblr.com/reblog/7703094650/vNQMTLwX">
<a href="http://www.tumblr.com/photo/1280/7703094650/1/tumblr_ll09emcfFn1qaywzm"><img src="http://27.media.tumblr.com/tumblr_ll09emcfFn1qaywzmo1_400.jpg" alt="" width="400" border="0" /></a>
<a href="http://cicerontheme.tumblr.com/post/7703094650" class="like-link" title="like this post"><div class="permalink perma-like"></div></a>
<a href="http://www.tumblr.com/reblog/7703094650/vNQMTLwX" title="reblog this post">
<div class="permalink perma-reblog"></div></a>
</div>
</div>
我写这个的tumblr教程:http://like-button.tumblr.com
一个就好保存到服务器,可以使用下面的URL,并将其设置为src
属性的无形的:
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
like
或unlike
{ReblogURL}
{PostID}
示例:
http://www.tumblr.com/like/23err8u4?id=844392923
在</head>
之前立即将以下代码块剪切并粘贴到您的主题中。这会在每个帖子上给你一个类似于默认Tumblr灰色心脏的按钮。当你将鼠标悬停在它上面并点击它时,它会变成红色。如果再次点击它,它会再次变成灰色并删除Like。
<style>
.my-like {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABH0lEQVQ4y62T30vCUBiGv/9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7+SMHXNs6S7ejZ3zvA+ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO/IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/N6c2Xq2KcXhiY6qV1rxwotU3n/NHF8fgW+g9hfsHJlJUYljcgAAAAASUVORK5CYII=) !important;
height:17px;
width:19px;
cursor:pointer;
display:inline-block;
vertical-align:top;
}
.my-liked, .my-like:hover {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABSklEQVQ4y2P4//8/Awy/O3fu/905c/4/2779/69Pn/4jy8Hwz/fv/z/buvX/vfnz/7+/eBFFDZj4cOXK/8O+Pv+36+rA8W4zs/8Ply1DUXx/4cL/u0yMUdQdCQ76/+nWLbA6hq+PH//fbW6OogAZ3+zvByu81t6OU80ea6v/P16//s9wqboKpyIYPhYeTlDN1abG/wz7HR0JKiQGH3Bz+8+ww0CfKobtMjb6z0ANg+CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBiPJuZSZFhF8pK/8NzACjrgKKWHINAOef3168Iw0D429OnGFmKEAZlJVDKR8mbMAyy4XRqClEGnc3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJiSgGHQmPf0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBjDrchm7KrAAAAAElFTkSuQmCC) !important;
height:17px;
width:19px;
cursor:pointer;
display:inline-block;
vertical-align:top;
}
</style>
<script>
window.onload = function() {
document.body.insertAdjacentHTML('beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>');
document.addEventListener('click', function (event) {
var myLikeLink = event.target;
if(myLikeLink.className.indexOf('my-like') > -1) {
var myLikeFrame = document.getElementById('my-like-frame'),
liked = (myLikeLink.className == 'my-liked'),
command = liked ? 'unlike' : 'like',
reblog = myLikeLink.getAttribute('data-reblog'),
postId = myLikeLink.getAttribute('data-id'),
oauth = reblog.slice(-8),
likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + postId;
myLikeFrame.src = likeUrl;
liked ? myLikeLink.className = 'my-like'
: myLikeLink.className = 'my-liked';
};
}, false);
};
</script>
然后剪切并粘贴以下按钮代码到你的主题,你希望你的喜欢按钮是(这一定是你的{block:Posts}
块内)。
代码:
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>
此代码不适用于我。我做错了什么,但我不知道是什么。 :(http://stackoverflow.com/q/10313328/351320 – Barbara 2012-04-25 10:05:33
@Barbara我更新了代码http://like-button.tumblr.com – ThinkingStiff 2012-04-25 19:57:03
一个不应该使用'data:image/png; base64 ...'在页面样式声明中,因为浏览器在这种情况下无法缓存任何图像。 – feeela 2012-05-04 12:40:07
你为什么不只看该页面的源代码? – feeela 2012-05-04 12:41:12