老域名交易

老域名购买,查询,出售,挖掘,注册,抢注,老域名购买,老域名出售,老域名注册,老域名查询,瑞昌网站建设

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

作者:zhushican 发布:2014/7/29 分类:seo教程 阅读: 次 0条评论

  第一种方法,用的是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墙裂推荐用第一种方法。

除非注明,本站所有文章均为 zhushican 原创,转载请注明出处! 标签: 分享  网页标题  链接  平滑右移效果  
« 上一篇下一篇 »

分享网页标题链接平滑右移效果:目前有0条评论