js实现目录定位正文示例
一：先查看截图效果
1） 
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>
相关推荐
-
js实现目录链接,内容跟着目录滚动显示的简单实例
如下所示: <script> require(["jquery", "bootstrap"], function($) { $(function() { $('.left').height(($('body').height() > $(window).height()) ? $('body').height() : $(window).height()); }); var goTo = $(".con"); var guide
-
JS实现超精简的链接列表在固定区域内滚动效果代码
本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META
-
JS实现随页面滚动显示/隐藏窗口固定位置元素
窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel
-
js 实现菜单左右滚动显示示例介绍
复制代码 代码如下: <!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
-
js实现目录定位正文示例
一:先查看截图效果 1) 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/xh
-
node.js遍历目录的方法示例
本文介绍了node.js遍历目录的方法示例,分享给大家,也给自己留个笔记,具体如下 同步遍历 const fs = require('fs'); const path=require('path'); function travel(dir,callback){ fs.readdirSync(dir).forEach((file)=>{ var pathname=path.join(dir,file) if(fs.statSync(pathname).isDirectory()){ travel
-
js实现磁性吸附的示例
磁性吸附 目录 代码实例 与限定范围拖拽的差异 下载源码链接 代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px; height: 500px; background: #999; position: relative; left: 100px; top: 100px; } #box { width: 100px; height: 100px; background: #334; position: absolute; cursor: m
-
js实现自定义滚动条的示例
自定义滚动条 目录 代码实例 代码解析 下载源码链接 代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px; height: 20px; background: #999; position: relative; margin: 20px auto; } #box2 { width: 20px; height: 20px; background: green; position: absolute; } #box3 { width: 0;
-
uniapp实现附近商家定位的示例代码
目录 一丶申请腾讯位置服务开发者密钥 二丶下载微信小程序JavaScriptSDK 三丶安全域名设置 四丶代码编写 4.1丶项目配置 4.2丶定义变量 4.3丶编写方法 4.4丶页面加载时调用 4.5丶数据展示 五丶真机调试效果图 有一个月没写博客了,最近在写项目,需要用到腾讯位置服务,获取附近商家位置.这里我就记录一下,实现过程. 一丶申请腾讯位置服务开发者密钥 申请地址:腾讯位置服务 - 立足生态,连接未来 官网教程:微信小程序JavaScript SDK | 腾讯位置服务 点击创建应用,
-
前端JS实现太极图案图文示例
目录 正文 canvas 实现 绘制黑色圆 完整DEMO Style Script 正文 本篇我们实现一个看似复杂毫无头绪,但实际上简单无比的图形,就是下图的太极图案 刚看到这个图案时候可能毫无头绪,因为各种圆弧,在实现时甚至都不知道应该用什么函数,但如果我们换一种样式,看起来是不是简单很多: 我们这次不使用 HTML + CSS 实现该图案,改用 canvas 来弄. canvas 实现 <canvas id="canvas" width="600" hei
-
web项目开发之JS函数防抖与节流示例代码
目录 防抖 引入 防抖场景1(鼠标移入) 防抖场景2(键盘按键) 函数节流 防抖 经典应用常见: 手风琴效果 引入 没有做防抖的网站: 做了防抖的网站: 防抖场景1(鼠标移入) 抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件. 例子: 想看第五张图片,.不想看2 3 4张. 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面.误触发. 函数防抖 : 用户连续多次触发某个事件,则只执行最后一次. 解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上
-
HTML+JS实现猜拳游戏的示例代码
目录 效果图 关于JS构建过程 添加事件监听器 函数 gameRules() 函数 whoWon() 效果图 游戏可以通过这个链接进入 关于JS构建过程 首先,我创建了一个对象,其中包含每种可能性的文本格式(石头.纸.剪刀),然后将图像源也添加到该对象中. 在我制作的 HTML 中: playerChoiceImg playerChoiceTxt computerChoiceImg computerChoiceTxt 能够修改其中的每个内容. 然后创建了一个points变量,它将存储每个玩家(玩
-
Vue.js实现watch属性的示例详解
目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原
-
JS+CSS绘制棋盘格的示例代码
目录 实现思路 完整代码 效果展示 在这篇文章中,我将展示如何使用 css 和一些 JavaScript 来设计棋盘. 为此,你需要对 CSS Flex-box 和 nth-child() 属性有基本的了解. 所以让我们开始吧...... 实现思路 我们将为每个偶数行添加 containerEven 类作为父容器,为每个奇数行添加 containerOdd, 下面显示了相同的 CSS .containerEven>div:nth-child(odd) { background-color: wh