javascript跟随滚动效果插件代码(javascript Follow Plugin)
javascript跟随滚动效果插件代码(javascript Follow Plugin)
发布时间:2016-12-30 来源:查字典编辑
摘要:Js跟随滚动效果插件支持定义多个跟随ID,采用cssfixed属性,不支持ie6,兼容其他主流浏览器。支持定义滚动到底部的最小高度,不会覆盖...

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>

<div>Header</div>

<div>

<div>

<div>

使用方法:<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>

<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

});

}

</pre>

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

<div>

<div id="follow">

跟随滚动<br/>模块1

</div>

<div id="follow2">

跟随滚动<br/>模块2

</div>

</div>

</div>

<div>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教程学习
编程开发子分类