分享网页标题链接平滑右移效果

《分享网页标题链接平滑右移效果》由会员分享，可在线阅读，更多相关《分享网页标题链接平滑右移效果（2页珍藏版）》请在金锄头文库上搜索。

1、分享网页标题链接平滑右移效果分享网页标题链接平滑右移效果来源：时尚品牌 http:/ jQuery。优点：兼容所有浏览器，包括 IE 什么的。缺点：代码也很短，没什么缺点。jQuery(document).ready(function($)$(.entry-title a).hover(function() /.entry-title a 改成你标题的样式名称,可以应用多个链接,用逗号隔开$(this).stop().animate(marginLeft: 10px, 200);/鼠标移动到链接上的平滑效果,200是毫秒,就是效果时间,可以改成你需要的时间, function() $(this

2、).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 /*移动距离可以自己调节*/按以上方法改完就可以看到效果了， 两种方法效果都一样， 但是第一种方法能兼容所有浏览器，所以小 V 墙裂推荐用第一种方法。