Heim > Web-Frontend > js-Tutorial > Hauptteil

javascript跟随滚动效果插件代码(javascript Follow Plugin)_javascript技巧

WBOY
Freigeben: 2016-05-16 17:27:01
Original
1108 Leute haben es durchsucht

Js 跟随滚动效果插件
支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。
支持定义滚动到底部的最小高度,不会覆盖底部
页面大小resize后,插件会自动重置参数
=======
Js 跟随滚动效果插件
1.支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。
2.支持定义滚动到底部的最小高度,不会覆盖底部
3.页面大小resize后,插件会自动重置参数
=======
使用方法
 代码如下
 

复制代码 代码如下:

 
window.onload = function(){
 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
 new Follow({
  obj:followIds,
  bottom:150
 });
}
 

 完整实例
 代码如下
 
复制代码 代码如下:

 



Js Follow



 

 
Header

 

  

   

    使用方法:

    1.载入插件,在页面载入之后,window.onload = function(){}

    2.创建需要跟随的对象的数组,比如 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];

    3.初始化Follow:new Follow();

    4.传参,obj是对象数组,bottom是滚动块距离底部的最小的高度

   

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

   

   









  

  

   

     跟随滚动
模块1
   

   

     跟随滚动
模块2
   

  

 

 
 


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


 
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!