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

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【分享网页标题链接平滑右移效果】，下面是详细的分享！

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

　　上次发了一篇《分享本站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墙裂推荐用第一种方法。

　　

以上所分享的是关于分享网页标题链接平滑右移效果，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：手机qq分享网页如何自定义缩略图,链接,标题和摘要

　　答： (function(){ var p = { url:location.href, showcount:'1',/*是否显示分享总数,显示：'1'，不显示：'0' */ desc:'',/*默认分享理由(可选)*/ summary:'',/*分享摘要(可选)*/ title:'',/*分享标题(可选)*/ site:'',/*分享来源 如：腾讯网(可选)*... >>详细

　　相关问题：如何控制微信分享网页时，展示的标题，描述和图片

　　答：微信上如何分享链接方法一、手动输入要分享网页的网址链接 1、打开 iPhone 上的“微信”选择底部的“朋友们”，点击上方的“朋友圈”， 2、接下来，在朋友圈界面中，按住右上角“相机”按钮2秒以上，（这里是关键，但当你长按的时候会提示这个功能是暂时... >>详细

　　相关问题：网页上标题部分加粗平滑的字体是什么字体？

　　答：提问标题的CSS源代码： {font: 700 16px/26px "Microsoft YaHei",SimHei,arial; font-family:'Microsoft YaHei', SimHei, arial; font-size: 16px; font-style: normal; font-variant:normal; font-weight: 700; line-height: 26px;} 可以鼠标“... >>详细