悬浮微信二维码微博置顶特效.下

重庆网站优化分享:如何在WORDPRESS网站中实现悬浮微信二维码微博置顶特效,之前在《悬浮微信二维码微博置顶特效.上》介绍了需要的源代码和图片,接下来详细如何调用代码:

1、将下载的CSS文件(zdtx_style.css)、images文件夹,使用FTP工具上传到网址主题的CSS文件夹中和images文件夹中(可以上传到别的地方,只是调用地址跟到改变就行),下载的文件如下;

zdtx5

2、JS源代码(jquery.min.js),在《如何给网站加上浮动小人》中有使用过该文件,所以此源代码此处省略,如果没有jquery.min.js源代码的可以去下,我们只需要调用该源代码;

3、上传工作完成后,我们就来打开网站后台,进行调用代码的添加。网站——外观—编辑——顶部(header.php),在hard标签内加入以下代码,添加好后更新文件:

<link href="http://www.chenjianglin.cn/wp-content/themes/Lonely1.1/css/zdtx_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.chenjianglin.cn/wp-content/themes/Lonely1.1/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#welcome').fadeTo(2000, 1).delay(2000).animate({
        opacity: 0,
        marginTop: '-=200'
    },
    1000,
    function() {
        $('#welcome').hide();
    });
    $(window).scroll(function() {
        if ($(window).scrollTop() > 50) {
            $('#jump li:eq(0)').fadeIn(800);
        } else {
            $('#jump li:eq(0)').fadeOut(800);
        }
    });
    $("#top").click(function() {
        $('body,html').animate({
            scrollTop: 0
        },
        1000);
        return false;
    });
});
</script>

zdtx4

由于之前我有调用过jquery.min.js文件,使用在此处就不在调用,如果之前你的网站有调用过jquery.min.js文件,去掉以下代码:

<script type="text/javascript" src="http://www.chenjianglin.cn/wp-content/themes/Lonely1.1/js/jquery.min.js"></script>

4、打开网站——外观—编辑——顶部(footer.php),在body标签内加入以下代码,添加好后更新文件:

<div class="top">
  <ul id="jump">
      <li style="display:none;height:50px;"><a id="top" href="#top"></a></li>
    <li style="height:50px"><a id="ceping" href="javascript:void(0)" onmouseover="showEWZ()" onmouseout="hideEWZ()">
      <div id="EWZ"><img src="images/wangzhan_code.jpg" /></div>
      </a></li>
    <li style="height:50px"><a id="weixin" href="javascript:void(0)" onmouseover="showEWM()" onmouseout="hideEWM()">
      <div id="EWM"><img src="images/weixin_code.jpg" /></div>
      </a></li>
    <li style="height:50px"><a id="sina" rel="nofollow" href="http://blog.sina.com.cn/vyseo" target="_blank"></a></li>
    <li style="height:50px"><a id="reply" href="http://www.chenjianglin.cn/lxwm" target="_blank"></a></li>
    <li style="display:none;height:50px;"><a id="top" href="#top"></a></li>
    <script>
          function showEWM()
            {
                document.getElementById("EWM").style.display = 'block';
                }
        function hideEWM()
            {
                document.getElementById("EWM").style.display = 'none';
                }
      </script>
      <script>
          function showEWZ()
            {
                document.getElementById("EWZ").style.display = 'block';
                }
        function hideEWZ()
            {
                document.getElementById("EWZ").style.display = 'none';
                }
      </script>
  </ul>
</div>

zdtx3

5、所有工作完成后刷新你的网站,你的悬浮微信二维码微博置顶特效酒大哥告成,以下为显示效果:

fdtx (2)

6、所有调用代码在下载文件中,使用DW打开index.html文件就能看见以上所有的源代码。

PS:如果有什么不明白的请留言和联系我,重庆陈江林会在第一时间帮你解答!

《悬浮微信二维码微博置顶特效》下载:http://pan.baidu.com/s/1gdf4xs3

发表评论

电子邮件地址不会被公开。 必填项已用*标注