0
(0)

很多朋友看到卢松松的博客:http://lusongsong.com/,觉得内页里面的那个滚动的回顶部和写评论按钮很酷,也想在自己的博客上实现,小川就发了些时间研究了一下,觉得实现起来很简单的,这里也给朋友们分享一下,先贴个效果图:
回顶部
实现方法:
1、先右击保存下面的两张图片:

2、把两张图片用FTP上传到你的wordpress主题文件夹里面的images图片文件夹里面;
3、然后把下面一段js代码放在内页single.php页面的适当位置(一般是文件的最后一个</div>上面);

<SCRIPT>
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById(“full”).style.top=parseInt(document.getElementById(“full”).style.top)+percent+”px”;
lastScrollY=lastScrollY+percent;
if(diffY > 500){document.getElementById(“full”).style.display = “block”}
else{
document.getElementById(“full”).style.display = “none”}
}
suspendcode=”<div id=\”full\” style=’display:none; width:15px; height:57px; POSITION:absolute; left:50%; top:460px; margin-left:200px;  z-index:100; text-align:center;’><a href=’#’><img src=’00_files/btn_top.gif‘ border=0 /></a><br><br><a href=’#comment’><img src=’00_files/btn_comment.gif’ border=0 /></a></div>”
document.write(suspendcode);
window.setInterval(“heartBeat()”,1);
function switchImage(imageId, imageUrl, linkId, linkUrl, preview, title, alt) {
 if(imageId && imageUrl) {
  var image = $(imageId);
  image.src = imageUrl;

  if(title) {
   image.title = title;
  }
  if(alt) {
   image.alt = alt;
  }
 }

 if(linkId && linkUrl) {
  var link = $(linkId);
  link.href = linkUrl;
 }
}

</SCRIPT>

注意代码里面的粉色部分是图标按钮在页面中所处的位置,可根据模板自由调整,红色部分是图片的路径,这个需要主题一定要保存路径正确,不然会出现叉的形式。
OK,演示可以去上面提到的卢松松博客观看,小川博客目前不提供效果演示。

声明:本站分享的WordPress主题/插件均遵循 GPLv2 许可协议(免费开源),相关介绍资料仅供学习参考,实际版本可能会因版本迭代或开发者调整而产生变化,如程序中涉及有第三方原创图像、设计模板、远程服务等内容,应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务,亦不收取相关费用。