提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript跟随滚动效果插件代码（javascriptFollowPlugin）

JavaScript插件代码 效果 滚动 跟随
2023-06-13 09:15:03 时间
Js跟随滚动效果插件
支持定义多个跟随ID，采用cssfixed属性，不支持ie6，兼容其他主流浏览器。
支持定义滚动到底部的最小高度，不会覆盖底部
页面大小resize后，插件会自动重置参数
=======
Js跟随滚动效果插件
1.支持定义多个跟随ID，采用cssfixed属性，不支持ie6，兼容其他主流浏览器。
2.支持定义滚动到底部的最小高度，不会覆盖底部
3.页面大小resize后，插件会自动重置参数
=======
使用方法
 代码如下
 复制代码代码如下:

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

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

 <!DOCTYPEhtml>
<htmllang="zh-CN">
<headprofile="http://gmpg.org/xfn/11">
<metacharset="UTF-8">
<title>JsFollow</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:0auto;}
.header{width:100%;background:#1BA1E2;height:200px;line-height:300px;}
.footer{width:100%;background:#666;height:150px;line-height:100px;}
.content{width:100%;margin:0auto;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:10px0px;margin-top:50px;background:#F09609;width:300px;height:150px;}
.aside2{padding:10px0px;background:#DB4F33;}
</style>
</head>
<body>
 <divclass="wrap">
 <divclass="header">Header</div>
 <divclass="contentclear">
  <divclass="left">
   <divclass="text">
   使用方法：<br/>
   1.载入插件，在页面载入之后，window.onload=function(){}<br/>
   2.创建需要跟随的对象的数组，比如varfollowIds=[document.getElementById("follow"),document.getElementById("follow2")];<br/>
   3.初始化Follow：newFollow();<br/>
   4.传参，obj是对象数组，bottom是滚动块距离底部的最小的高度<br/>
   <hr/>
<prestyle="word-break:break-all;word-wrap:break-word;width:600px;">
<scripttype="text/javascript"src="follow.js"></script>
window.onload=function(){
 varfollowIds=[document.getElementById("follow"),document.getElementById("follow2")];
 newFollow({
 obj:followIds,
 bottom:150
 });
}
</pre>
   </div>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </div>
  <divclass="right">
   <divclass="aside"id="follow">
    跟随滚动<br/>模块1
   </div>
   <divclass="aside2"id="follow2">
    跟随滚动<br/>模块2
   </div>
  </div>
 </div>
 <divclass="footer">Footer</div>
 </div>
<scripttype="text/javascript"src="follow.min.js"></script>
<script>
window.onload=function(){
 varfollowIds=[document.getElementById("follow"),document.getElementById("follow2")];
 newFollow({
 obj:followIds,
 bottom:150
 });
}
</script>
</body>
</html>
 

相关文章