熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

javascript跟隨滾動效果插件代碼

2022-06-13   來源: JSP教程 

  Javascript Follow Plugin

  Js 跟隨滾動效果插件

  支持定義多個跟隨ID采用css fixed屬性不支持ie兼容其他主流浏覽器

  支持定義滾動到底部的最小高度不會覆蓋底部

  頁面大小resize後插件會自動重置參數

  =======
Js 跟隨滾動效果插件

  支持定義多個跟隨ID采用css fixed屬性不支持ie兼容其他主流浏覽器
支持定義滾動到底部的最小高度不會覆蓋底部
頁面大小resize後插件會自動重置參數
=======

  使用方法

 代碼如下  

  <script type="text/javascript" src="followjs"></script>

  windowonload = function(){
 var followIds = [documentgetElementById("follow")documentgetElementById("follow")];
 new Follow({
  obj:followIds
  bottom:
 });
}

  
完整實例

 代碼如下  

  
<!DOCTYPE html>
<html lang="zhCN">
<head profile="
<meta charset="UTF">
<title>Js Follow</title>
<style>
htmlbody{width:%;margin:;padding:;}
div{padding:;margin:;textalign:center;fontsize:px;fontweight:bold;color:#fff;}
clear:after{content:"";display:block;height:;clear:both;visibility: hidden;overflow:hidden;}
clear{*zoom:;}

  wrap{width:px;margin: auto;}
header{width:%;background:#BAE;height:px;lineheight:px;}
footer{width:%;background:#;height:px;lineheight:px;}
content{width:%;margin: auto;background:#aaa;}
left{width:%;float:left;background:#CBF;}
text{padding:px;textalign:left;wordbreak:breakall;lineheight:px;fontsize:px;fontweight:normal;}
right{width:%;float:left;}
aside{padding:px px;margintop:px;background:#F;width:px;height:px;}
aside{padding:px px;background:#DBF;}
</style>
</head>
<body>
 <div class="wrap">
  <div class="header">Header</div>
  <div class="content clear">
   <div class="left">
    <div class="text">
    使用方法<br/>
    載入插件在頁面載入之後windowonload = function(){}<br/>
    創建需要跟隨的對象的數組比如 var followIds = [documentgetElementById("follow")documentgetElementById("follow")];<br/>
    初始化Follownew Follow();<br/>
    傳參obj是對象數組bottom是滾動塊距離底部的最小的高度<br/>
    <hr/>
<pre style="wordbreak:breakall;wordwrap:breakword;width:px;">
&lt;script type="text/javascript" src="followjs"&gt;&lt;/script&gt;

  windowonload = function(){
 var followIds = [documentgetElementById("follow")documentgetElementById("follow")];
 new Follow({
  obj:followIds
  bottom:
 });
}

  </pre>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
   </div>
   <div class="right">
    <div class="aside" id="follow">
     跟隨滾動<br/>模塊
    </div>
    <div class="aside" id="follow">
     跟隨滾動<br/>模塊
    </div>
   </div>
  </div>
  <div class="footer">Footer</div>
 </div>

  <script type="text/javascript" src="followminjs"></script>
<script>
windowonload = function(){
 var followIds = [documentgetElementById("follow")documentgetElementById("follow")];
 new Follow({
  obj:followIds
  bottom:
 });
}
</script> 
</body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20534.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.