字号: - o +

两种方法实现标题链接平滑右移

2012-10-15 前端开发 0人评论 6,005次浏览   

子曰:学如驾车登山,不进就退;学如逆水行舟,不进则退 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

今天我要写的是鼠标放在标题上,标题平滑右移的效果。下面让我们来折腾吧~

第一种方法,用的是jQuery。

优点:兼容所有浏览器,包括IE什么的。

缺点:代码也很短,没什么缺点。

jQuery(document).ready(function($){       
$('.entry-title a').hover(function() {    
//.entry-title a 改成你标题的样式名称,可以应用多个链接,用逗号隔开      
$(this).stop().animate({'marginLeft': '10px'}, 200);      
//鼠标移动到链接上的平滑效果,200是毫秒,就是效果时间,可以改成你需要的时间      
}, function() {       
$(this).stop().animate({'marginLeft': '0px'}, 200);      
//鼠标离开链接后的平滑效果,200同上      
});       
});  

首先第一步要让主题加载jQuery库文件,现在基本上没有主题没加载,所以第一步可以省略。

(想要知道有没有加载这个库文件的童鞋,在网页查看源代码中,搜索“jquery.min.js”,如果有就是有加载啦。)

第二步就是将这个代码粘贴到主题加载的其中一个JS文件里,就OK了。

第二种方法,用的是CSS3。

优点:效果一样,没啥优点。

缺点:不兼容IE浏览器,在IE下会右移,但是没有平滑效果,因为IE不支持CSS3。

先给你标题的a标签样式添加以下CSS属性:

-webkit-transition: margin 0.2s ease-out;   
-moz-transition: margin 0.2s ease-out;   
-khtml-transition: margin 0.2s ease-out;

再给这个a:hover添加:

margin-left:10px  /*移动距离可以自己调节*/  

按以上方法改完就可以看到效果了,两种方法效果都一样,但是第一种方法能兼容所有浏览器,所以我推荐用第一种方法。

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

发表我的评论

*

*

取消