Menu

Theme update – 20131126

2013/11/27 1 Min Read

小雪在浏览网站的时候看到人家的文章页面的超链接特效很和谐很赞,就忍不住把自己博客的主题也给换上这个效果lol

example:这是一个超链接

效果的实现很简单,就是把需要加特效的超链接文字加上一个 <span> 包住,然后在CSS中样式化。

example:
[code type=html]<a href=”#”><span data-title=”链接文本”>链接文本</span></a>[/code]

效果CSS样式化就用到伪对象span:after以及CSS3的特有属性transform,具体可参考CSS手册。看起来很简单吧XD,但是小雪还是弄了好久QAQ。主要在于对超链接进行筛选的时候,不知道怎么排除链接包含图片的情况,比如

<a href = "#"><img src="#" /></a>

jQuery遍历是个大学问啊哎~后来终于知道问题出在哪了,修改后就work.

范例jQuery:
[code type=javascript]
$(document).ready(function(){
$(‘.article a’).addClass(‘roll’);
$(‘.article a’).not($(‘.article a img’).parent()).each(function(){
var val = $(this).html();
$(this).wrapInner(‘‘);
});
});
[/code]

范例CSS:
[code type=css]
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
}
a.roll{
color:#990100;
font:bold;
}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.roll:hover span {
background: #111;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: #990100;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
[/code]

成功解决了之后又有新问题了…

小雪以前用的插件遭嫌弃了,于是随大流用上了WP自家做的插件Jetpack。但是它还是有讨厌的地方就是后台不能自定义分享条的摆放位置,只能紧随文后,所以在做超链接特效的时候影响到了这个分享条…小雪想了好多办法想把这块重元素集中排除掉都觉得好繁琐好麻烦,于是还是去爬文看看是不是有什么办法移一下它的位置…结果在jetpack的官方博客发现了这个: Moving Sharing Icons

依照文章内容小雪改了主题文件里的functions.php,以及添加了相应的代码到小雪心仪的分享条位置,但是都不能正常work…觉得似乎是加在functions.php中的代码有点问题,但是具体也不太清楚,好捉急。幸好文章末尾还给出了一个解决方案,是Beau Lebens提出来的一个jQuery思路,这个赞,很方便就搞掂了,哈哈。

范例jQuery:
[code type=javascript]
$(document).ready(function() {
// 把share按钮移至id=”sharing”的标签内
$(‘#sharing’).html($(‘.sharedaddy’).detach());
});
[/code]

Written By

博主小雪出沒於魔都,目前工作是後端程序員,喜歡旅遊,特別是文化歷史遺跡和博物館,一生所愛日本彩虹樂隊 ( L'Arc-en-Ciel) ,家有橘貓朵朵一隻。

15 Comments

  1. apocalypse说道:

    小雪 你那个汉堡包导航效果是怎么实现的?有没有源码分析。。。XD

    1. 小雪说道:

      汉堡包?这样的形容我听不懂诶~~~

      源码…我现在这个主题有公开下载链接呀,不过不是最新的,我太懒了,没有更新很久了….但是导航这个应该有包括的,很早以前就是这个导航了。

  2. lifishake说道:

    好久没联络了,最近博客搬家换域名,搜索遍历才发现找到了老朋友家,hoho~

    1. 小雪说道:

      哈哈,欢迎老朋友来访~

  3. nix1024说道:

    一个懂技术、爱折腾的文科美女,简直是开挂一般的存在!

  4. Louis Han说道:

    问题复问题

    1. 小雪说道:

      问题何其多~

  5. Sascha Weaver说道:

    小雪的码农一面……

    1. 小雪说道:

      = 3 =
      才不是码农,我是科技小白

      1. Sascha Weaver说道:

        反正比我厉害多了……我的博客已经一年没更新了 -_-

  6. 小雪的醬醬说道:

    好厲害!

    1. 小雪说道:

      求大大别黑窝…

      1. 中行獨復•離说道:

        小雪真的很棒~!

        1. 小雪的醬醬说道:

          必須棒!樓上有眼光XD

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用*标注

了解 花開未央 的更多信息

立即订阅以继续阅读并访问完整档案。

Continue reading