Of Stack

Js implementation directory location text sample

  • 2020-03-29 23:43:36
  • OfStack
First, check the screenshot effect

1)
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311141524141.gif? 20131014152438 ">  
2) clicking on the directory in the left navigation bar will correspond to the corresponding layer

Ii: download the imported jquery-1.7.2.min.js file

Iii. Page code: 
 
<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 Vertically positioned scroll effect code </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," Song typeface ",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;} 
 

 
#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: Imitation song dynasty style typeface ;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: Imitation song dynasty style typeface ;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> The authors declare  
</h3> 
<p>jquery Vertically positioned scroll effect code , It's a personal hobby, it's based on jquery A special effect, without any encapsulation, just provides a way of thinking and implementation, code sharing can be freely used, may exist bug But I do not undertake any repairs bug Responsibility. </p> 

</div> 
<div class="con" style="background:green;" id="box1"> 
<h3> Movie news </h3> 
<p> George  ・  R ・ R · Martin captivated hundreds of millions of fans with a fantasy epic that eventually made it to the small screen but turned out to be a cinematic epic. After that, it created high ratings, became a regular fixture of golden ball and Amy, and gained great returns with big investment, which also attracted the appetite of "ice and fire fans". Since the 2011 Since the release of game of thrones in the spring of this year, the first season of the vast expansion, the second season of the magnificent development, to this year's third season of the return of the mighty, HBO Created a period of miracles in the history of American TV series, won public praise and viewing of the big climax. The heroic war of the seven kingdoms, the detour of the imperial court, the fierce collision between human nature and animal nature, as well as the erotic scene with vivid colors and fragrance, make it shining, and has been showing the trend of "getting better". </p> 
<p> Now "game of thrones", with its vast army of white walkers and intricate human relationships, is once again bringing viewers together to witness its magnificence and subtlety, its beauty and its cruelty. Let us go back to this "past life" written by god in the form of illustration, interpret its greatness, and look forward to its magnificent follow-up. </p> 
<p> This "game of thrones", the audience will be along for the ride! This project will illustrate the digital totem of "ice and fire" to welcome the return of ice and fire in a relaxed way. </p> 
</div> 
<div class="con" style="background:yellow; " id="box2"> 
<h3> Celebrity news </h3> <p> George  ・  R ・ R · Martin captivated hundreds of millions of fans with a fantasy epic that eventually made it to the small screen but turned out to be a cinematic epic. After that, it created high ratings, became a regular fixture of golden ball and Amy, and gained great returns with big investment, which also attracted the appetite of "ice and fire fans". Since the 2011 Since the release of game of thrones in the spring of this year, the first season of the vast expansion, the second season of the magnificent development, to this year's third season of the return of the mighty, HBO Created a period of miracles in the history of American TV series, won public praise and viewing of the big climax. The heroic war of the seven kingdoms, the detour of the imperial court, the fierce collision between human nature and animal nature, as well as the erotic scene with vivid colors and fragrance, make it shining, and has been showing the trend of "getting better". </p> 
<p> Now "game of thrones", with its vast army of white walkers and intricate human relationships, is once again bringing viewers together to witness its magnificence and subtlety, its beauty and its cruelty. Let us go back to this "past life" written by god in the form of illustration, interpret its greatness, and look forward to its magnificent follow-up. </p> 
<p> This "game of thrones", the audience will be along for the ride! This project will illustrate the digital totem of "ice and fire" to welcome the return of ice and fire in a relaxed way. </p> 
</div> 
<div class="con" style="background:red; " id="box3"> 
<h3> The TV news </h3> <p> George  ・  R ・ R · Martin captivated hundreds of millions of fans with a fantasy epic that eventually made it to the small screen but turned out to be a cinematic epic. After that, it created high ratings, became a regular fixture of golden ball and Amy, and gained great returns with big investment, which also attracted the appetite of "ice and fire fans". Since the 2011 Since the release of game of thrones in the spring of this year, the first season of the vast expansion, the second season of the magnificent development, to this year's third season of the return of the mighty, HBO Created a period of miracles in the history of American TV series, won public praise and viewing of the big climax. The heroic war of the seven kingdoms, the detour of the imperial court, the fierce collision between human nature and animal nature, as well as the erotic scene with vivid colors and fragrance, make it shining, and has been showing the trend of "getting better". </p> 
<p> Now "game of thrones", with its vast army of white walkers and intricate human relationships, is once again bringing viewers together to witness its magnificence and subtlety, its beauty and its cruelty. Let us go back to this "past life" written by god in the form of illustration, interpret its greatness, and look forward to its magnificent follow-up. </p> 
<p> This "game of thrones", the audience will be along for the ride! This project will illustrate the digital totem of "ice and fire" to welcome the return of ice and fire in a relaxed way. </p> 
</div> 
<div class="con" style="background:orange; " id="box4"> 
<h3>wzh</h3> <p>wangzihu<p> Now "game of thrones", with its vast army of white walkers and intricate human relationships, is once again bringing viewers together to witness its magnificence and subtlety, its beauty and its cruelty. Let us go back to this "past life" written by god in the form of illustration, interpret its greatness, and look forward to its magnificent follow-up. </p> 
<p> This "game of thrones", the audience will be along for the ride! This project will illustrate the digital totem of "ice and fire" to welcome the return of ice and fire in a relaxed way. </p> 
<p> Now "game of thrones", with its vast army of white walkers and intricate human relationships, is once again bringing viewers together to witness its magnificence and subtlety, its beauty and its cruelty. Let us go back to this "past life" written by god in the form of illustration, interpret its greatness, and look forward to its magnificent follow-up. </p> 
<p> This "game of thrones", the audience will be along for the ride! This project will illustrate the digital totem of "ice and fire" to welcome the return of ice and fire in a relaxed way. <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> navigation </h3> 
<div class="sideGuide" > 

<ul> 
<li class="on"><a href="javascript:void(0)"> The authors declare </a><s></s></li> 
<li><a href="javascript:void(0)"> Movie news </a><s></s></li> 
<li><a href="javascript:void(0)"> Celebrity news </a><s></s></li> 
<li><a href="javascript:void(0)"> The TV news </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; 

//Set the width of high
//var resetFun = function(){ goTo.each(function(){ }); } 
//resetFun(); 

//scroll
var goToFun = function(){ 
var len=document.getElementById("box"+index).offsetTop;//Gets the height of the div layer to the top of the page
//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>
Related articles: