网站开发日志: jQuery + CSS 制作上下滑动卷页

有网友问：

（博客）左下角那个点击可以上下滑动是怎么制作的。

我在日志里曾经介绍过jQuery 动画卷页。这个特效就是采用类似的jQuery代码，不同的是多了一些CSS代码。下面我将简单介绍如何制作这个特效。

1.html代码：

<div id="footerud">
  <div id="up"></div>
  <div id="down"></div>
</div>

注意：你可以把这段代码放在<body>和</body>之间的适当位置，例如：</body>前。

2. css代码：

#footerud{
  bottom:10px;display:block;position:fixed;left:15px;
}
#up{
  background:url(../images/arrowtop.png) no-repeat;
  cursor:pointer;height:14px;margin-bottom:15px;
  position:relative;width:25px;
}
#down{
  background:url(../images/arrowbottom.png) no-repeat;
  cursor:pointer;height:60px;margin-top:15px;
  position:relative;width:25px;
}

#up和#down里定义了背景图(也就是上下箭头)，你可以用你喜爱的图片代替，我这两个也是网上找到。注意：../images/指定了图片相对CSS文件的路径，你可能要根据你的实际情况更改。

3. jQuery代码：

jQuery(document).ready(function() {
  jQuery('#up').click(function(){
    if(jQuery.browser.safari) {//这里判断浏览器是否为safari
      jQuery('body').animate({scrollTop:0}, 'slow');
      return false;//返回false可以避免在原链接后加上#
    }
    else{
      jQuery('html').animate({scrollTop:0}, 'slow');
      return false;
    }
  });
   jQuery('#down').click(function(){
    if(jQuery.browser.safari) {//这里判断浏览器是否为safari
      jQuery('body').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');
      return false;//返回false可以避免在原链接后加上#
    }
    else{
      jQuery('html').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');
      return false;
    }
  });
});

这个在jQuery 动画卷页一文里有介绍，如有不明白的地方请留言。注意：向上翻页比较简单，用scrollTop:0就可以了，但是向下翻页，必须指明你的页面最底部HTML元素，例如：我用到 scrollTop:jQuery('#footerPan').offset().top. 这里#footerPan就是我博客页面底部HTML元素的ID。

标签： CSS, Jquery

5 条评论:

非常感谢，呵呵我昨天看了你的js代码，但不确定哪些部分是这个作用的。http://www.61dh.com/js/common.js?111508 我这就试试去

作者沿阶草, 时间 2009年6月10日下午8:08
菜鸟，不过已经做好了。blogger.com+静态服务器功能也蛮强大的，就是那个评论不太爽。

作者沿阶草, 时间 2009年6月10日下午9:07
是的，其实我也不喜欢这个评论系统。也有打算切换到wordpress，但是觉得挺麻烦的。以后吧...

作者 D Cai, 时间 2009年6月10日下午9:23
好的，已经添加你的链接。以后多向你学习。

作者沿阶草, 时间 2009年6月10日下午9:47
客气了:-) 多多交流!

作者 Adam, 时间 2009年6月10日下午9:56

发表评论

指向此帖子的链接:

<$BlogBacklinkTitle$>: <$BlogBacklinkSnippet$>
<$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$>

jQuery + CSS 制作上下滑动卷页

5 条评论:

发表评论

指向此帖子的链接:

关于

上一个

jQuery + CSS 制作上下滑动卷页

相关文章:

5 条评论:

发表评论

指向此帖子的链接:

关于

上一个