js实现目录定位正文示例


Posted in Javascript onNovember 14, 2013

一:先查看截图效果

1)
js实现目录定位正文示例 
2)点击左侧导航栏里的目录会对应到对应的层

二:下载引进jquery-1.7.2.min.js文件

三:页面代码:

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery纵向定位滚屏特效代码</title> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
</head> 
<body> 
<style type="text/css"> 
.sty1{width:500px;height:500px;OVERFLOW-Y: auto; OVERFLOW-X:hidden;}/*设置层的垂直滚动条*/ 
*{margin:0;padding:0;list-style:none;} 
body{color:#333;font:14px/150% "Microsoft YaHei", Arial,"宋体",sans-serif;text-align:center;background:#DCDCDC;} 
img{border:0;} 
a{text-decoration:none;color:#333;} 
html{ _background-image:url(about:blank);_background-attachment:fixed;} 
/* html加上这段代码用于取消ie6滚动时候元素震动bug */ 
/* content */ 
#content{position:relative;z-index:0;padding-left:250px;width:860px;} 
.article{background:#04caca;text-align:left;} 
.article dt{width:60%;padding-top:50px;margin:0 auto;font:normal 40px/200% "Microsoft YaHei";color:#fff;text-shadow:1px 1px 1px #666;} 
.article dd{position:relative;z-index:1;width:60%;margin:20px auto 0 auto;} 
.article dd .con{position:relative;z-index:1;padding:30px;font:normal 16px/200% "Microsoft YaHei";} 
.article dd .con p{text-indent:24px;margin-bottom:20px;} 
.con{width:500px;OVERFLOW-Y: auto; OVERFLOW-X:hidden;} 
.hside{position:fixed;z-index:1;left:50px;top:5px;width:180px;height:40px;line-height:40px;background:#f50;color:#fff;font-family:仿宋;font-size:15px;} 
.sideGuide{position:fixed;z-index:1;left:50px;top:45px;width:180px;background:#fff;height:90%;OVERFLOW-Y: auto; OVERFLOW-X:hidden;} 
.sideGuide h3{height:40px;line-height:40px;background:#f50;font-weight:bold;color:#fff;} 
.sideGuide ul{padding:10px 0;} 
.sideGuide li{height:32px;line-height:32px;position:relative;font-weight:bold;border-bottom:1px solid #f4f4f4;vertical-align:middle;font-family:仿宋;font-size:15px;} 
.sideGuide li s{display:none;position:absolute;top:0;left:-10px;width:10px;background:#555;height:32px;} 
.sideGuide li a{display:block;color:#999;} 
.sideGuide li a:hover{text-decoration:none;color:#f50;} 
.sideGuide li.on s{display:block;} 
.sideGuide li.on a{background:#f4f4f4;color:#333;} 
</style> 
<div id="content"> 

<div class="con" style="background:blue;" id="box0"> 
<h3>作者声明 
</h3> 
<p>jquery纵向定位滚屏特效代码,是个人业余兴趣爱好写的,是基于jquery一个特效,没有任何封装,只是提供一种思考方式和实现方法,代码共享可随便使用,可能存在bug,但本人不承担任何修复bug的责任。</p> 
</div> 
<div class="con" style="background:green;" id="box1"> 
<h3>电影新闻</h3> 
<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
</div> 
<div class="con" style="background:yellow; " id="box2"> 
<h3>人物新闻</h3> <p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
</div> 
<div class="con" style="background:red; " id="box3"> 
<h3>电视新闻</h3> <p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
</div> 
<div class="con" style="background:orange; " id="box4"> 
<h3>wzh</h3> <p>wangzihu<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p> 
</div> 
</div> 
</div> 
<div class="hside"> 
<h3>导航</h3> 
<div class="sideGuide" > 
<ul> 
<li class="on"><a href="javascript:void(0)">作者声明</a><s></s></li> 
<li><a href="javascript:void(0)">电影新闻</a><s></s></li> 
<li><a href="javascript:void(0)">人物新闻</a><s></s></li> 
<li><a href="javascript:void(0)">电视新闻</a><s></s></li> 
<li><a href="javascript:void(0)">wzh</a><s></s></li> 
</ul> 
</div> 
</div> 
<script type="text/javascript" > 
(function($){ 
var goTo = $(".con"); 
var guide = $(".sideGuide"); 
var guideLi = $(".sideGuide li"); 
var index=0; 
var direct=0; 
//设置宽高 
//var resetFun = function(){ goTo.each(function(){ }); } 
//resetFun(); 
//屏幕滚动 
var goToFun = function(){ 
var len=document.getElementById("box"+index).offsetTop;//获取div层到页面顶部的高度 
//alert(len); 
//alert(index) ; 
direct=0; 
if(index<0){ index=0; return } 
if(index>=guideLi.size()){ index=guideLi.size()-1; return } 
$("html,body").stop().animate({ scrollTop:len },300,"swing",function(){direct=0; }); 
guideLi.removeClass("on").eq(index).addClass("on"); 
} 
guideLi.each(function(i){ $(this).click(function(){ index=guideLi.index( $(this) ); goToFun(); }) }); 
//$(window).resize(function(){ }); 

/* 滚轮事件 */ 
var scrollFunc=function(e){ 
e=e || window.event; 
if(e.wheelDelta){ direct+= (-e.wheelDelta/120); }else if(e.detail){ direct+=e.detail/3 ; } 
if( direct>=8 ){ goToFun( index++ ) } 
if( direct<=-8 ){ goToFun( index-- ) } 
} 
if( document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); } 
window.onmousewheel=document.onmousewheel=scrollFunc; 
})(jQuery); 
</script> 
</body> 
</html></pre><br> 
<br> 
<p></p> 
<pre></pre> 
<p></p>
Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 #Javascript
javascript间隔刷新的简单实例
Nov 14 #Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 #Javascript
js中prototype用法详细介绍
Nov 14 #Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 #Javascript
JS获取农历日期具体实例
Nov 14 #Javascript
提高jQuery性能的十个诀窍
Nov 14 #Javascript
You might like
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
nodeJS微信分享
2017/12/20 NodeJs
js中实例与对象的区别讲解
2019/01/21 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python内置数据类型详解
2014/08/18 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python+os根据文件名自动生成文本
2019/03/21 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
市场调查策划方案
2014/06/10 职场文书
清洁工岗位职责
2015/02/13 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
python数字图像处理:图像的绘制
2022/06/28 Python