wordpress文章标题链接平滑右移效果代码
在很多的博客上看到了,鼠标过去,文章列表标题抖动右移的效果。感觉挺炫的。我试了一下。在我的博客主题上感觉不太适合,所以没有继续用。
不过先收着吧,以后需要的时候也可以继续用。大家可以试试!
第一种方法: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 /*移动距离可以自己调节*/
按以上方法改完就可以看到效果了,两种方法效果都一样,但是第一种方法能兼容所有浏览器,所以推荐使用第一种方法。
(资源库 www.zyku.net)
上一篇:WordPress如何使用the_title()与the_title_attribute()函数
栏 目:WordPress
本文地址:https://www.zyku.net/wp/1037.html
您可能感兴趣的文章
- 03-31简单实现一个手持弹幕功能+文字抖动特效
- 09-07jquery版右下角弹窗特效
- 04-03基于JQuery和原生JavaScript实现网页定位导航特效
- 02-18利用纯CSS3实现动态的自行车特效源码
- 01-10手机图标壁纸秀-手机图标壁纸秀应用软
- 12-22vivo nex3调整屏幕亮度方法详解
- 01-14万小能遥控器-万小能遥控器应用软件功
- 02-26帝国CMS功能解密之:标签实现复杂调用更
- 03-03苹果手机开启夜拍模式方法
- 12-26彩映录音机-彩映录音机应用软件功能介
- 01-12闪聘直招-闪聘直招应用软件功能介绍
- 04-20一加9r关闭上方HD图标教程
- 11-09QQ音乐乐心功能怎么关闭
- 10-26苹果13怎样启用勿扰模式
- 03-10利用SublimeLinter 编写高质量的 Java
- 01-19帝国CMS-二次开发手册
- 12-23HTML <del> 标签
- 03-24iPhone信号强度查询教程
- 01-12致用数学-致用数学应用软件功能介绍
- 03-31小米10s开启区域截屏方法
最近更新
阅读排行
猜你喜欢
- 01-16野路子司机端-野路子司机端应用软件功
- 03-03华为手机闹钟设为视频方法
- 10-08黑鲨4s怎么开启指纹解锁
- 03-20荣耀60截屏方法
- 09-15oppo手机如何启用来电播报
- 04-18vivos9智能提醒设置方法
- 02-08opporeno5运行程序关闭步骤
- 10-17苹果手表如何连接手机
- 01-16村晓-村晓应用软件功能介绍
- 11-03小米11pro怎么更改小爱同学唤醒词