首页 建站技巧 学建站网回顶部特效实现方法...

学建站网回顶部特效实现方法

作者:

修改日期:

有好几个学员问我学建站网右下角的回顶部和微信展示怎么实现的,这里学建站网给搭建分享下这个特效实现的方法。

首先声明,代码并非学建站网原创,而是在懒人图库下载的免费特效,然后根据学建站网的网站风格进行改造的,以下是详细的过程,整个实现过程可再次被复制,如果你觉得这样的效果不错,也可以跟着做,只需要按照教程复制其中的代码即可,不需要懂代码。

1、下载绿色版代码附件包:
链接地址:http://pan.baidu.com/share/link?shareid=433452&uk=403909634
密码:ccat
2、下载后解压,里面的文件如下图:
回顶部压缩包文件
文件功能作用介绍:
CSS文件:里面附带特效实现所必须的CSS样式;
images文件:特效所使用的图片;
js文件:特效所必须要加载的jquery.js和js.js文件;
index.html:特效调用文件,里面有调用特效的代码。
特别提醒#:下载后可以直接右击选择浏览器打开index.html文件查看特效效果如下图。
特效演示

材料准备好后,下一步就是需要把这些代码分别融合到自己的网站中,用来实现这个特效,以后遇到其他的一些特效,只要能够下载到代码,实现过程是一样的。融合过程:
第一步、上传图片和js文件到主题文件中;
比如学建站是把images文件夹中的图片上传到了学建站主题的images文件夹,把jquery.js和js.js文件上传到主题的js文件夹里面了;
第二步、复制CSS文件lrtk.css中的代码到主题的style.css的底部,并修改其中的背景图片路径../images/icon.png为images/icon.png;
第三步、调用!
这步是关键,我们需要正确的调用上传的文件,不然会导致效果整合失败。
1、打开wordpress主题顶部文件header.php,并在标签上使用以下代码调用js文件;

  1. <!– 第一个js调用 –>  
  2. <script type=“text/javascript” src=“<?php bloginfo(‘template_directory’); ?>/js/jquery.js”></script>  
  3. <!– 第二个js调用 –>  
  4. <script type=“text/javascript” src=“<?php bloginfo(‘template_directory’); ?>/js/js.js”></script>  

特别提醒#:如果你的主题中已经加载了jquery.js,则只需要放置第二个js文件调用即可。
2、在index.html文件中,复制调用代码到wordpress主题footer.php文件标签上面:

  1. <!– 代码开始 –>  
  2. <div id=“code”></div>  
  3. <div id=“code_img”></div>  
  4. <a id=“gotop” href=“javascript:void(0)”></a>  
  5. <!– 代码结束 –>  

修改后如下图:
调用代码放置
如果不出意外,到这一步,刷新你的网站应该在右下角就可以看到特效了,当然可能位置稍有偏差,你还需要根据自己的网站做下调整,稍有些CSS基础的同学都可以实现的,这里就不再啰嗦了。