推广 热搜: 后台  帝国cms  DESTOON  位置  网站  帝国cms建站  Wordpress教程  MAC系统  内容  destoon模板 

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

   日期:2019-04-20     浏览:175    违规举报
 
腾讯云服务器优惠

在很多的博客上看到了,鼠标过去,文章列表标题抖动右移的效果。感觉挺炫的。我试了一下。在我的博客主题上感觉不太适合,所以没有继续用。

不过先收着吧,以后需要的时候也可以继续用。大家可以试试!

第一种方法: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

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

免责声明:
1、本站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。
2、本站部分作品内容是由网友自主投稿和发布、编辑整理上传,对此类内容本站仅提供交流平台,不为其版权负责,更不为其观点承担任何责任。
3、因行业及专业性有限,故未能核验会员发布内容的真实性及有效性,不为其负责,如有虚假或违规内容敬请准备材料图片发邮件到info@n360.cn举报,本站核实后积极配合删除。
4、如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时处理或删除。
 
打赏
 
更多>同类网站技术
0相关评论

推荐图文
推荐网站技术
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  免责声明  |  版权隐私  |  信息发布规则  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2020081222号
Powered By DESTOON