Javascript Tumblr上的快速按钮_Javascript_Html_Css_Tumblr

Javascript Tumblr上的快速按钮

javascript html css

Javascript Tumblr上的快速按钮,javascript,html,css,tumblr,Javascript,Html,Css,Tumblr,有人能解释一下这个按钮是怎么工作的吗如您所见，一旦整个页面完成加载，将鼠标悬停在帖子或图片上会显示几个按钮，包括一个like按钮（左下角的心形按钮）有人能解释一下它是怎么工作的吗？我已经尝试了一段时间，在源代码上尝试脚本，但是没有用。这是我在源代码中发现的，这意味着带有like按钮和reblog按钮链接的div只是硬编码的，并用css隐藏。正如您所看到的，当您将鼠标悬停在元素上时，会出现一个css块。所以它只是CSS 编辑：我添加了一篇文章的HTML代码，正如您所看到的，有几个div的类p

有人能解释一下这个按钮是怎么工作的吗

如您所见，一旦整个页面完成加载，将鼠标悬停在帖子或图片上会显示几个按钮，包括一个like按钮（左下角的心形按钮）

有人能解释一下它是怎么工作的吗？我已经尝试了一段时间，在源代码上尝试脚本，但是没有用。

这是我在源代码中发现的，这意味着带有like按钮和reblog按钮链接的div只是硬编码的，并用css隐藏。正如您所看到的，当您将鼠标悬停在元素上时，会出现一个css块。所以它只是CSS

编辑：我添加了一篇文章的HTML代码，正如您所看到的，有几个div的类permalink

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>

这是我在源代码中找到的，这意味着带有like按钮和reblog按钮链接的div只是硬编码的，并用css隐藏。正如您所看到的，当您将鼠标悬停在元素上时，会出现一个css块。所以它只是CSS

编辑：我添加了一篇文章的HTML代码，正如您所看到的，有几个div的类permalink

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教程：

要将Like保存到服务器，请使用以下URL并将其设置为不可见的

的

src

属性：

http://www.tumblr.com//?id=

命令：
```
类似
```
或
```
不同
```
oauthId:
```
{ReblogURL}
```
postId:
```
{postId}
```

例如：

http://www.tumblr.com/like/23err8u4?id=844392923

在

之前，将以下代码块剪切并粘贴到主题中。这将在每个帖子上为您提供一个类似于默认Tumblr灰心的按钮。当您将鼠标悬停在它上面并单击它时，它将变为红色。如果您再次单击它，它将再次变为灰色并删除类似内容


.我喜欢{
背景图片：url（数据：数据：数据：图像/png；Bas64，IvBoBorWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWe数据：数据：数据：图像/png；Bas64，WeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWe75MD6WU8QZexkrhvtoblwsjuhc4kyo99v8bwnm0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/n6c2c2xqxxxxxhiy6qv1rxwotu3n/NHF8fgW+g9hfshjljuyljcgaaaasuvork5cyii=）！重要；
高度：17px；
宽度：19px；
光标：指针；
显示：内联块；
垂直对齐：顶部；
}
.我喜欢，.我喜欢：悬停{
背景图片：url数据：数据：图像/png；Bas64，IvBorwwwwwwwwwwwwwwwwwwwww8/Awy/O3/O3/O3/O3/905c/4/4/4/2779/79/69Pn/4/4/4/7号数据：图像/数据：图像：图像/巴巴巴巴巴新巴巴巴巴巴新；数据：巴巴巴巴巴新；巴巴巴新；巴巴新；巴新数据：图像/数据：数据：图像/数据：图像/数据：图像/数据：图像/巴新（数据：图像/巴新巴新（数据：图像/数据：图像/数据：图像/数据：图像：图像/巴新巴新巴新巴新巴新巴新巴新；巴新巴新巴新；巴新；巴新/数据：图像/数据：图像/数据：图像/数据：图像/数据：图像/数据：图像/数据：图像/数据：图像/数据：图像/巴CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBIPJUZSZFF8PK/8NZACJRKKKKWHINAOF3168IW0D429ONGFMEAZLJVDKR8BMAY4XRQCLEGNC3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJISGHQMPF0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBRCHM7KRAAAELFTKSUQMCC）！重要；
高度：17px；
宽度：19px；
光标：指针；
显示：内联块；
垂直对齐：顶部；
}
window.onload=函数（）{
document.body.insertAdjacentHTML（'beforeed'，''；
document.addEventListener（'click'，函数（事件）{
var myLikeLink=event.target；
if（myLikeLink.className.indexOf（'my like'）>-1）{
var myLikeFrame=document.getElementById（'my like frame'），
喜欢=（myLikeLink.className==“我喜欢的”），
command=like？'inspect'：'like'，
reblog=myLikeLink.getAttribute（'data reblog'），
postId=myLikeLink.getAttribute（'data id'），
oauth=reblog.slice（-8），
利库尔http://www.tumblr.com/'+command+'/'+oauth+'？id='+postId；
myLikeFrame.src=likeUrl；
喜欢？myLikeLink.className='我喜欢'
：myLikeLink.className='my liked'；
};
}，假）；
};

然后将下面的按钮代码剪切并粘贴到主题中您想要的类似按钮的位置（这必须在

{block:Posts}

块中）

代码：

我写了一篇关于这方面的Tumblr教程：

要将Like保存到服务器，请使用以下URL并将其设置为不可见的

的

src

属性：

http://www.tumblr.com//?id=

命令：
```
类似
```
或
```
不同
```
oauthId:
```
{ReblogURL}
```
postId:
```
{postId}
```

例如：

http://www.tumblr.com/like/23err8u4?id=844392923

在

之前将以下代码块剪切并粘贴到主题中。这将在每篇文章上为您提供一个类似默认Tumblr灰心的like按钮。当您将鼠标悬停在它上面并单击它时，它将变为红色。如果您再次单击它，它将再次变为灰色并删除类似内容


.我喜欢{
背景图片：url（数据：数据：数据：图像/png；Bas64，IvBoBorWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWe数据：数据：数据：图像/png；Bas64，WeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWe75MD6WU8QZexkrhvtoblwsjuhc4kyo99v8bwnm0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/n6c2c2xqxxxxxhiy6qv1rxwotu3n/NHF8fgW+g9hfshjljuyljcgaaaasuvork5cyii=）！重要；
高度：17px；
宽度：19px；
光标：指针；
显示：inlin