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代码:
博主文章好给力,站长精灵的百度挖词功能又增强了,可以帮助博主提高人气增加流量,欢迎回访试用,交流挖词心得。
正在使用你的工具!
很喜欢博主博客这个上下滑动的效果啊!~~~~~~~
谢谢哈!
‘#foot_info’为底部footer的ID,这个id应该从哪找呢