wordpress站内标题链接实现鼠标经过平滑右移效果

小站因前两年的关闭,现又重新建立不久,很多功能还在完善并实现中,比如本文中所要记录的标题链接实现鼠标经过文字向窗口右边平滑有移效果。

这个效果呢也是看见别人站点有,自己也想实现于是度娘寻找方法,方法参照于:记忆。经实践总结最后实现了这这一效果,如图所示:注:具体请查阅本站链接效果,本图页面打开速度快则效果不可见,也就是不明显。

20150805230224

方法一:jQuery代码

  1. /*————————————————-*/
    /*  为文章标题链接添加平滑右移效果
    /*————————————————-*/
    jQuery(document).ready(function($){
    $(‘.entry-title a,.hot-title a,.widget a’).hover(function() {
    //.entry-title a 改成你标题的样式名称,可以应用多个链接,用逗号隔开
    $(this).stop().animate({‘marginLeft’: ’10px’}, 200);
    //鼠标移动到链接上的平滑效果,200是毫秒
    }, function() {
    $(this).stop().animate({‘marginLeft’: ‘0px’}, 200);
    //鼠标离开链接后的平滑效果
    });
    });
  2. 这里需要加载jQuery库,首先打开你所使用主题的header.php模板文件,在</head>标签前添加:
    <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js”></script>注:(如果你的主题已加载了JQuery,这步就免了。)实在不清楚你就在页面右键查看源码,通过CTRL+F键 搜索  jquery.min.js,然后将方法一下的代码添加到该js中,上传到空间刷新效果即可呈现。
    方法二:在标题的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  /*移动距离可以自己调节*/
  3. 两种方法中第一种优点可以兼容所有浏览器,第二种不兼容IE浏览器且只有有移效果。
  4. 这里告诉大家另一种方法实现全站链接平移应用,同样还是要确保是否加载了JQuery库。如果已加载本步骤就免了。
    (1)在主题中的 style.css 文件里添加下面一句代码(这是全站链接应用,如果只想部分链接应用,于其前面加入其它控制符):
    a{position:relative;}
    (2)在主题中的 jquery.min.js文件底部加入以下代码:
    /*实现全站标题链接平移*/
    jQuery(document).ready(function($){
    $(‘a’).hover(function() {
    $(this).stop().animate({‘left’: ‘5px’}, ‘fast’);
    }, function() {
    $(this).stop().animate({‘left’: ‘0px’}, ‘fast’);
    });
    });
    这里本站不需要所以注销了。那么整个效果的代码就贴完了
版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

没有账号? 忘记密码?