!
也想出现在这里? 联系我们
广告位

文章标题链接平滑右移效果代码

在很多的博客上看到了,鼠标过去,文章列表标题抖动右移的效果。感觉挺炫的。我试了一下。在我的博客主题上感觉不太适合,所以没有继续用。不过先收着吧,以后需要的时候也可以继续用。大家可以试试!

方法一:

优点:兼容所有浏览器,包括 IE 什么的。

缺点:代码也很短,没什么缺点。

  1. jQuery(document).ready(function($){
  2. $('.entry-title a').hover(function() {
  3. //.entry-title a 改成你标题的样式名称,可以应用多个链接,用逗号隔开
  4. $(this).stop().animate({'marginLeft': '10px'}, 200);
  5. //鼠标移动到链接上的平滑效果,200是毫秒,就是效果时间,可以改成你需要的时间
  6. }, function() {
  7. $(this).stop().animate({'marginLeft': '0px'}, 200);
  8. //鼠标离开链接后的平滑效果,200同上
  9. });
  10. });

首先第一步要让主题加载 jQuery 库文件,现在基本上没有主题没加载,所以第一步可以省略。(想要知道有没有加载这个库文件的童鞋,在网页查看源代码中,搜索“jquery.min.js”,如果有就是有加载啦。)第二步就是将这个代码粘贴到主题加载的其中一个 JS 文件里,就 OK 了。

方法二:

优点:效果一样,没啥优点。

缺点:不兼容 IE 浏览器,在 IE 下会右移,但是没有平滑效果,因为 IE 不支持 CSS3。

先给你标题的 a 标签样式添加以下 CSS 属性:

  1. -webkit-transition: margin 0.2s ease-out;
  2. -moz-transition: margin 0.2s ease-out;
  3. -khtml-transition: margin 0.2s ease-out;

再给这个 a:hover 添加:

  1. margin-left:10px /*移动距离可以自己调节*/

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

给TA打赏
共{{data.count}}人
人已打赏
前端学习

Html清除浮动的几种方法介绍

2024-8-16 13:42:13

前端学习

CSS完美实现iframe高度自适应(支持跨域)

2024-8-23 15:02:08

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索