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

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;">
<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 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>
 

时间: 2024-08-30 22:31:59

javascript跟随滚动效果插件代码(javascript Follow Plugin)_javascript技巧的相关文章

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

这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下   Js 跟随滚动效果插件 支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器. 支持定义滚动到底部的最小高度,不会覆盖底部 页面大小resize后,插件会自动重置参数 ======= Js 跟随滚动效果插件 1.支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器. 2.支持定义滚动到底部的最小高度,

javascript跟随滚动效果插件代码

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

纯JavaScript基于notie.js插件实现消息提示特效_javascript技巧

本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下 效果图: 实现的代码: html代码: <br><br><br><br><br><br> <article class="zzsc"> <div class="div-ext"> <div cl

Javascript模拟scroll滚动效果脚本第1/2页_javascript技巧

1something 2something 3something 4something 5something 6something 7something 8something 9something 10something 11something 12something 13something 14something 15something 16something 17something 18something 19something 20something 21something 22somet

使用JavaScript动态设置样式实现代码及演示动画_javascript技巧

今天做了一个css的练习,效果有点象Maxthon首页一样.使用onmouseover和onmouseout事件实现不同的效果.如: 你可以使用下面javascript. 复制代码 代码如下: <script type="text/javascript"> function DynamicSetStyle(id, attr, val) { var element = document.getElementById(id); if (element) element.styl

JavaScript程序开发之JS代码放置的位置_javascript技巧

JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?下面来看一下. 一般来说有两种方式,写在界面上和使用.js文件. 1.1界面上的Head部分 可以直接放在head标签内,如下代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>testPage</title> <script type=&quo

Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)_javascript技巧

复制代码 代码如下: //导入js文件 function getResult(url, ready) { var xmlHttp; var r = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //alert(isIE); var xmlstr; var xmldoc; var isIE = !!(window.attachEvent && !window.opera); if (isIE)

javascript实现滚动效果的数字时钟实例_javascript技巧

网上关于javascript实现数字时钟效果的实例很多,但是本文给大家介绍的是滚动效果的数字时钟.小编觉得效果很炫,下面分享给大家. 先来看看很炫的效果 下面是代码实例 javascript代码部分: window.onload=function(){ function toDou(n){ return n<10?"0"+n:""+n; } var oImg=document.getElementsByTagName("img"); set

javascript 新闻滚动效果

提示:您可以先修改部分代码再运行 javascript 新闻滚动效果 <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>javascript 新闻滚动效果</title> <style&