网站美化:免插件实现,文章标题平滑移动特效

网站美化:免插件实现,文章标题平滑移动特效

一、前言

当鼠标移动到文章标题的时候,会往右平移一段距离。

效果如下图所示:

网站美化:免插件实现,文章标题平滑移动特效

二、代码部署

把下面的js代码复制添加到自己网站主题的任意一个加载使用的js代码文件中。

/* 文章标题平移效果*/
jQuery(document).ready(function($){
$('.list-title a ,.entry-title a,.nav-single a,.widget ul li a').hover(function() {
$(this).stop().animate({'left': '10px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
});

然后在style.css中增加以下代码,知更鸟主题的用户可以添加到外观->主题设置->定制风格->自定义样式里面。

.list-title a,.widget.like_most_img ul li a,.widget.hot_post_img ul li a,.widget.recent_comments ul li a,.widget.hot_comment ul li a{position:relative;}

三、总结

可以根据自己的需求,对css进行更改。

 

本站整理自:

https://iazuresky.com/966.html

来源:

https://cuijiahua.com/blog/2018/01/website_8.html

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?