《双陈记》情侣博客

位置:主页 > 折腾WP > Jquery上下滑动效果

Jquery上下滑动效果

Jquery上下滑动这个效果在很多WordPress博客里都有,很是流行啊!主要作用就是帮助访客快速的到达网站的顶部,底部,和留言板块。今天,也折腾了一下,在我们情侣博客《双陈记》中也实现了这个Jquery上下滑动效果。以下代码并非《双陈记》情侣博客原创,我也找不到原作者了,网上代码也挺多的,代码来源网络。
1.首先前提加载Jquery库:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>

2.HTML代码放在需要显示上下滑动导航的地方,比如《双陈记》的就放在文章页single.php里.

<div id=”shangxia”><div id=”shang”></div><div id=”comt”></div><div id=”xia”></div></div>

3.加载css样式代码:

#shangxia{position:absolute;top:40%;right:50%;margin-right:460px;display:block;}

#shang,#comt,#xia{background:url(images/huadong.png) no-repeat;position:relative;cursor:pointer;height:17px;width:16px;margin:2px 0;}

#comt{background-position:center -16px;height:16px;}

#xia{background-position:center -34px;}

这里需要一个图片:

双陈记情侣博客上下滚动

图片可以自行设计修改,如图片大小有变化相应的css也需要修改。

4.加载Jquery代码:

jQuery(document).ready(function($){
var s= $(‘#shangxia’).offset().top;$(window).scroll(function (){$(“#shangxia”).animate({top : $(window).scrollTop() + s + “px” },{queue:false,duration:500});});
$body = (window.opera) ? (document.compatMode == “CSS1Compat” ? $(‘html’) : $(‘body’)) : $(‘html,body’);
$(‘#shang’).click(function(){$body.animate({scrollTop: ‘0px’}, 400);});
$(‘#xia’).click(function(){$body.animate({scrollTop:$(‘#foot_info’).offset().top}, 800);});
$(‘#comt’).click(function(){$body.animate({scrollTop:$(‘#comments’).offset().top}, 800);});
});
‘#foot_info’为底部footer的ID,’#comments’为留言框的ID根据自己ID做相应更改
建议存在一个单独的Js文件:
如这样<script type=”text/javascript” src=”http://love730.com/wp-content/js/scroll.js”></script>
到这里就OK了。
《双陈记》情侣博客成功实现Jquery上下滚动的效果了。


无觅相关文章插件

已经有5位童鞋留言了,还不来盖楼!

  1. 博主文章好给力,站长精灵的百度挖词功能又增强了,可以帮助博主提高人气增加流量,欢迎回访试用,交流挖词心得。

  2. 很喜欢博主博客这个上下滑动的效果啊!~~~~~~~

  3. ‘#foot_info’为底部footer的ID,这个id应该从哪找呢

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片