javascript 스크롤 효과 플러그 인 코드 따라 가기(javascript Follow Plugin)

Js 스크롤 효과 플러그 인 에 따라 여러 개의 ID 를 정의 할 수 있 습 니 다.css fixed 속성 을 사용 하고 ie6 를 지원 하지 않 으 며 다른 주류 브 라 우 저 를 호 환 합 니 다.끝까지 굴 러 가 는 최소 높이 를 지원 합 니 다.아래쪽 페이지 크기 resize 를 덮어 쓰 지 않 으 면 플러그 인 은 자동 으로 매개 변 수 를 리 셋 합 니 다========Js 는 굴 러 가 는 효과 플러그 인 1.여러 개의 따라 가 는 ID 를 지원 합 니 다.css fixed 속성 을 사용 하고 ie6 를 지원 하지 않 으 며 다른 주류 브 라 우 저 를 호 환 합 니 다.2.끝까지 스크롤 하 는 최소 높이 를 지원 합 니 다.아래쪽 을 덮어 쓰 지 않 습 니 다.3.페이지 크기 resize 후 플러그 인 은 자동 으로 매개 변 수 를 리 셋 합 니 다======사용 방법 코드 는 다음 과 같다.


 <script type="text/javascript" src="follow.js"></script>
window.onload = function(){
 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
 new Follow({
  obj:followIds,
  bottom:150
 });
}

전체 인 스 턴 스 코드 는 다음 과 같다.


 <!DOCTYPE html>
<html lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<meta charset="UTF-8">
<title>Js Follow</title>
<style>
html,body{width:100%;margin:0;padding:0;}
div{padding:0;margin:0;text-align:center;font-size:40px;font-weight:bold;color:#fff;}
.clear:after{content:"";display:block;height:0;clear:both;visibility: hidden;overflow:hidden;}
.clear{*zoom:1;}
.wrap{width:1000px;margin:0 auto;}
.header{width:100%;background:#1BA1E2;height:200px;line-height:300px;}
.footer{width:100%;background:#666;height:150px;line-height:100px;}
.content{width:100%;margin:0 auto;background:#aaa;}
.left{width:70%;float:left;background:#8CBF26;}
.text{padding:50px;text-align:left;word-break:break-all;line-height:36px;font-size:16px;font-weight:normal;}
.right{width:30%;float:left;}
.aside{padding:10px 0px;margin-top:50px;background:#F09609;width:300px;height:150px;}
.aside2{padding:10px 0px;background:#DB4F33;}
</style>
</head>
<body>
 <div class="wrap">
  <div class="header">Header</div>
  <div class="content clear">
   <div class="left">
    <div class="text">
        ：<br/>
    1.    ，       ，window.onload = function(){}<br/>
    2.            ，   var followIds = [document.getElementById("follow"),document.getElementById("follow2")];<br/>
    3.   Follow：new Follow();<br/>
    4.  ，obj     ，bottom              <br/>
    <hr/>
<pre style="word-break:break-all;word-wrap:break-word;width:600px;">
&lt;script type="text/javascript" src="follow.js"&gt;&lt;/script&gt;
window.onload = function(){
 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
 new Follow({
  obj:followIds,
  bottom:150
 });
}
</pre>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
   </div>
   <div class="right">
    <div class="aside" id="follow">
         <br/>  1
    </div>
    <div class="aside2" id="follow2">
         <br/>  2
    </div>
   </div>
  </div>
  <div class="footer">Footer</div>
 </div>
<script type="text/javascript" src="follow.min.js"></script>
<script>
window.onload = function(){
 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
 new Follow({
  obj:followIds,
  bottom:150
 });
}
</script> 
</body>
</html>

javascript 스크롤 효과 플러그 인 코드 따라 가기(javascript Follow Plugin)

좋은 웹페이지 즐겨찾기