双击滚屏及页面导航功能测试

Posted by fly3q on 2010年07月18日 Leave a comment (7) Go to comments

WordPress javasrcipt, jquery, 优化, 双击, 滚屏, 页面导航

昨天逛友链时候发现了几个新功能，分析移植下，为我所用，嘿嘿。

双击滚屏效果

首先是双击滚屏效果，所谓的双击滚屏就是自动进行滚屏效果，不需要你鼠标滑轮去拖动了，嘿嘿。是在万戈兄一句话实现双击滚屏效果看到的，代码很小，就一句话。这边就直接说明怎么做了，打开主题的head.php文件，找到<body>，将下面这一句代码插入<body>中变成
<body onDblClick="s=setInterval('scrollBy(0,2)',50)"  onMousedown="clearInterval(s)" onload="s=0;">
上传空间，刷新测试。

页面导航功能

在闲云野鹤情侣上看到了这个页面导航的功能，感觉挺方便的，查看下页面源码，移植为我所用下，莫怪了，嘿嘿。最终实现的效果：

进行上中下的导航，下面来看看怎么移植的呢？

在<head.php>文件中加入如下代码

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/conNav.js"></script>

在主题js目录下面添加conNav.js文件，文件内容如下：

jQuery(document).ready(function($){
$('.conNavUp').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
//点击id="conNavUp"对象时，滑动至相对浏览器滚动条为0px（即顶部），时间为800毫秒
$('.conNavCenter').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
//点击id="conNavCenter"对象时，滑动至id="comment"相对浏览器滚动条的距离，时间为800毫秒
$('.conNavDown').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
});

jQuery(document).ready(function($){
var s= $('.conNav').offset().top; //取得id="conNav"元素相对当前窗口的高度，并赋值给 s
$(window).scroll(function (){ //浏览器滚动条触发事件
 $(".conNav").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});
 //添加id="conNav"元素自定义动画，使其滑动"滚动条距顶部高度+ s "距离，动画过程为500毫秒；
});
});

在主题的css中加入如下css描述：

/* content navigation START */
.conNav {
 display:block;
 left:50%;
 margin-left:-473px;
 position:absolute;
 top:40%;
}
.conNavUp {
 background:url("img/conNavUp.gif") no-repeat scroll 0 0 transparent;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
}
.conNavCenter{
 background:url("img/conNavCenter.gif") no-repeat scroll 0 0 transparent;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
}
.conNavDown {
 background:url("img/conNavDown.gif") no-repeat scroll 0 0 transparent;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
}
/* content navigation End */

这样就完成了所需的功能，大家来测试吧，嘿嘿。