制作网页标题链接平滑右移效果

上次发了一篇《分享本站LOGO发光效果的实现方法》，不知道有几个童鞋用上了，不喜欢的我也没辙啦，我只是分享我的方法嘛。

今天我要写的是鼠标移动到标题上，标题平滑右移的效果，效果可以看我的主页。

你还在嫌你的页面不够生动不够活力吗?亲，那就看下面的教程折腾起来吧!

第一种方法，用的是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 /*移动距离可以自己调节*/

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

当前名称：制作网页标题链接平滑右移效果
文章网址：/news19/324469.html

成都网站建设公司_创新互联，为您提供定制开发、外贸网站建设、App设计、网站营销、网站制作、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联