低一度

顶部横幅

内页“回顶部”“写评论”JS代码

2010-9-14 - diyidu - 网页设计 - Views

这个效果是昨天才放上去的（参见我的日志页），不料一用上就有同学向我讨要教程。那好吧，继续发扬哥的共享精神。

有一点需要说明：这个JS特效并非哥的原创，其实是昨天逛卢松松博客时看到的，感觉还不错，用上以后应该会有益于提高博客的互动热度，所以就给移植了过来。图片色调是经过调整了的，JS文件中的定位参数也重新调了，看起来还不错，比较切合我的主题。那么今天就分享了吧，用我这款绿色主题的同学，可以直接按如下教程添加——

Step 1：先将下列代码，保存为JS文件，自己命名呵，如：“fudong.js”；

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 == 0){document.getElementById("full").style.display = "none"}
else{document.getElementById("full").style.display = "block"}
}*/
if(diffY > 450){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:420px; margin-left:213px;  z-index:100; text-align:center;'><a href='#'><img src='../THEMES/aqua_dyd/style/images/btn_top.gif' border=0 /></a><br><br><a href='#respond'><img src='../THEMES/aqua_dyd/style/images/btn_comment.gif' border=0 /></a></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);

<!--
//双击自动滚屏
var currentpos, timer;
function initialize() {
    timer = setInterval("scrollwindow()", 10); //设置滚动的速度
}
function sc() {
    clearInterval(timer);
}
function scrollwindow() {
    window.scrollBy(0, 1);
}
document.onmousedown = sc;
document.ondblclick = initialize;
-->

Step 2：将这个JS文件上传到主题包下的SCRIPT目录下；

Step 3：将所需的两张图片btn_top.gif、btn_comment.gif，上传至主题包下/style/images/目录下；

Step 4：进入后台，编辑修改主题包下文件“./THEMES/主题包ID/TEMPLATE/single.html”，在“<head></head>”区，插入JS调用代码——

<script type="text/javascript" src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/SCRIPT/fudong.js"></script>

Step 5：提交保存后，后台文件重建即可。

JS文件直接下载：点这儿 OK，Enjoy it！

关键词 // JS实例 JS应用 网页设计 低一度
出处：低一度，链接：http://www.diyidu.cn/post/jscode_fudong.html

上一篇：可伸展收缩的信息框tabSlideOut 下一篇：怎样的网站具备发展壮大的潜力

随机推荐

to "内页“回顶部”“写评论”JS代码"

  • 爱好者博客
    #1 爱好者博客 回复该留言 2010-9-14 10:39:55
    这个沙发坐得！
    爱好者博客 于 2010-9-14 10:40:19 回复
    真爽哇，哈哈，卢松松也弄了一个出来。
    晓潘博客 于 2010-9-14 10:44:37 回复
    桶哥！写博客重要？考试重要？！鄙视你！哈哈。
    桶哥 于 2010-9-14 10:54:53 回复
    我自己都鄙视自己了。不过这会正上班呢，不能公开读书啊。不让我写写博客，会闷死我的。
    老实人博客 于 2010-9-16 15:43:00 回复
    我来挤一下~
    acboy 于 2010-9-19 17:20:04 回复
    没有沙发，我也过来挤挤！这个确实挺好的，我看到有几个博客有这个，但是好像都和你的主题很像的。要是用到我的主题去，估计要修改不少参数，所以还是伤心地、遗憾地不用了。不过，要留着，相信日后能用……
    爱好者博客 于 2010-10-10 13:39:27 回复
    我已经弄好了,不错了,折腾半天,发现桶哥的教程还是有一些问题的,比如写评论,那儿要修改aqua_dyd/图片的路径,以前评论的描标签.很多人默认是#comment,所以还不是很详细,还有就是说JS放在哪儿,写的太笼统了,没有注明要放在模板文件的JS文件夹,我第一时间就放在了根目录的SCRIPT文件夹了.
  • 记忆之家
    #4 记忆之家 回复该留言 2010-9-14 11:20:40
    我还以为支持Ctr+Enter提交呢，原来不行。你主题我改了些，现在我的支持了。
  • 小易
    #5 小易 回复该留言 2010-9-14 11:40:22
    将这个JS文件上传到主题包下的SCRIPT目录下，主题包下没有SCRIPT目录。
    桶哥 于 2010-9-14 12:46:03 回复
    不可能吧，那你就新建一个咯。
  • mice
    #6 mice 回复该留言 2010-9-14 12:12:23
    唔，我还以为是卢松松抓的你的呢，原来弄反了。
  • 人好哇
    #11 人好哇 回复该留言 2010-9-14 17:00:55
    这东西还有进一步改进的空间，如楼上所说的换做jQuery之类的，期待后面的改进哦！
  • 天毅
    #20 天毅 回复该留言 2010-9-15 9:57:50
    这个貌似在你页面最上方的时候就显示不出来（win xp，firefox 3.6），看到你文章最上方有一个“我来说两句”，估计是你故意这样设置的。但是习惯了点悬浮的那个，突然找不到了，确实有些迷茫……
  • nikedunksb
    #24 nikedunksb 回复该留言 2010-9-15 16:04:46
    代码好像也没有我的工作让人头疼了，是什么原因？也许我改变不了外部的，只有改变自己了，我要换。
  • 番茄网络
    #34 番茄网络 回复该留言 2010-10-5 15:44:42
    实在是太到位了，我这两天就是在找这种代码，终于在你这篇文章找到了。3Q。我把其中的参数修改了一下，图片也换了。看看我的马上就要更新的效果页面吧：www.zhp5127.ws/gl
  • 番茄网络
    #35 番茄网络 回复该留言 2010-10-7 15:44:55
    我的网站已经运用这个代码了，图片和相应的参数我也修改过了，我还想问一下，这个代码能不能做成那种固定浮窗的效果？比如我这个zhp5127.ws/cn页面右边的分享按钮一样让人感觉不到这个按钮在动。我发现安装这种自动隐藏的代码之后，如果页面太长，这个代码会慢慢的弹出来，如果能保持自动隐藏，而且和这个分享按钮一样做成固定浮窗效果就更好了。
    桶哥 于 2010-10-7 18:32:23 回复
    http://www.diyidu.cn/post/tabslideout.html
    那你试试这个效果。
  • 番茄网络
    #36 番茄网络 回复该留言 2010-10-7 20:48:49
    http://www.diyidu.cn/post/tabslideout.html这个效果不适合我的网站使用，如果你现在使用的这种浮动效果能做成固定浮窗就比较适合我的网站使用了。因为我的网站上的联系方式一定要点击到相应的链接去才更好用。
  • 番茄网络
    #38 番茄网络 回复该留言 2010-10-7 22:02:35
    我刚刚在网上找到了一款可以进行漂移效果的返回顶部的代码，图片也可以添加两张，但就是无法将其中一张图片进行超链接到“联系我们”的页面。
    ewq 于 2011-9-7 16:47:47 回复
    sdfsf
  • 出租车司机
    #39 出租车司机 回复该留言 2010-11-15 0:30:29
    这个我喜欢。看着就舒服。用的是你的主题。配上这个，感觉美观许多。谢谢桶哥！
  • 李超
    #40 李超 回复该留言 2011-3-10 21:50:18
    这个东东很实用！代码不少，鸭梨挺大的，不过也得收了。
  • 智林
    #41 智林 回复该留言 2011-7-10 17:22:19
    你好，首先谢谢您提供了这么好的代码。不过在我的网站上“写评论”功能无效……能帮忙看下是怎么回事么？
    diyidu 于 2011-7-10 18:29:39 回复
    针对你那个主题，JS代码中要做一点儿修改——

    <a href='#respond'><img src='../THEMES/aqua_dyd/style/images/btn_comment.gif' border=0 /></a>

    把这一句改为：

    <a href='#posttop'><img src='../THEMES/aqua_dyd/style/images/btn_comment.gif' border=0 /></a>
    智林 于 2011-7-11 7:20:05 回复
    谢谢啊。
    厦门SEO 于 2011-9-14 21:11:06 回复
    <a href='#respond'> 这个写评论的地址是由什么决定的？望指教：）
  • 厦门SEO
    #43 厦门SEO 回复该留言 2011-9-15 0:15:32
    再请教一个问题哦，就是如何让这个图片对齐在中线上？谢谢啊。

Add comment

验证码