网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 大学论文导航 设计下载 最新论文 下载排行 原创论文 论文源代码
返回网学首页
网学联系
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 编程文档 > 网络知识 > 正文

用jQuery实现WordPress侧边上下滚动导航条效果

来源:http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 14/07/04

以下是网学网为您推荐的网络知识-用jQuery实现WordPress侧边上下滚动导航条效果,希望本篇文章对您学习有所帮助。

  用/* shangxia */
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
/* 使用fixed使id="shangxia"的对象固定于浏览器中,相对的上距离为40%,左距离为50%(即居中),然后向左移动520px(需自行调整!!!) */
#shang{background:url(images/shang.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}
#xia{background:url(images/xia.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}
#comt{background:url(images/comt.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}

3、在

<script type="text/javascript" >
jQuery(document).ready(function($){
$(''#shang'').click(function(){$(''html,body'').animate({scrollTop: ''0px''}, 800);}); //time:800ms
$(''#comt'').click(function(){$(''html,body'').animate({scrollTop:$(''#respond'').offset().top}, 800);}); //time:800ms
$(''#xia'').click(function(){$(''html,body'').animate({scrollTop:$(''#footer'').offset().top}, 800);});});
</script>

4、做好之前的几步以后就是在对应该的地方添加调用。

  要在这些

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<!-- shangxia end -->

  文章归档 (archive.php)文件中添加

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<!-- shangxia end -->

  页面模板 (page.php)文件中添加

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<!-- shangxia end -->

  文章页面 (single.php)文件中添加

<!-- shangxia begin -->
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
<!-- shangxia end -->

  首先确保你的页面已经加载

<script type="text/javascript" src="/uploadfile/201407/4/D7115632696.png" />

Wordpress下载:

WordPress v3.5.2 简体中文版下载

界面预览

  • 软件语言:简体中文
  • 运行环境:PHP/Mysql
  • 软件授权:免费版
  • 更新时间:2013-7-24 16:05:30
  • 相关链接:Home Page

WordPress v3.9 英文版下载

界面预览

  • 软件语言:英文
  • 运行环境:PHP/MySQL
  • 软件授权:开源软件
  • 更新时间:2014-4-17 9:56:31
  • 相关链接:Home Page

本文转自:http://www.yziw.net/archives/2272.html

网学推荐

免费论文

原创论文

设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号