A-A+

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

2015年08月06日 技术分享, 网站建设, 网页设计 评论 1 条 阅读 4,145 次

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

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

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');
    });
    });
    这里本站不需要所以注销了。那么整个效果的代码就贴完了,涂涂小窝整理记录智是为了方便给需要用到朋友,如果代码有问题或测试不成功还请留言提出宝贵意见,我们一起探讨。

1 条留言  访客:0 条  博主:0 条   引用: 1 条

来自外部的引用: 1 条

  • wordpress给文章标题链接添加正在给力加载提示 | 涂涂小窝

给我留言

icon_question icon_razz icon_sad icon_evil icon_exclaim icon_smile icon_redface icon_biggrin icon_surprised icon_eek icon_confused icon_cool icon_lol icon_mad icon_liuhan icon_rolleyes icon_wink icon_idea icon_arrow icon_neutral icon_cry icon_mrgreen icon_qinqin icon_bizui

×
订阅图标按钮