在很多的博客上看到了,鼠标过去,文章列表标题抖动右移的效果。感觉挺炫的。我试了一下。在我的博客主题上感觉不太适合,所以没有继续用。
不过先收着吧,以后需要的时候也可以继续用。大家可以试试!
第一种方法: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 /*移动距离可以自己调节*/
按以上方法改完就可以看到效果了,两种方法效果都一样,但是第一种方法能兼容所有浏览器,所以推荐使用第一种方法。