zoukankan      html  css  js  c++  java
  • javascript跟随滚动效果插件代码(javascript Follow Plugin)

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下
    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跟随滚动效果--www.jbxue.com</title>
    <style>
    html,body{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{1000px;margin:0 auto;}
    .header{100%;background:#1BA1E2;height:200px;line-height:300px;}
    .footer{100%;background:#666;height:150px;line-height:100px;}
    .content{100%;margin:0 auto;background:#aaa;}
    .left{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{30%;float:left;}
    .aside{padding:10px 0px;margin-top:50px;background:#F09609;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;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>

  • 相关阅读:
    Reading papers_2(与GMM相关,ing...)
    Matlab DIP(瓦)ch11表示与描述练习
    HMM学习笔记_1(从一个实例中学习DTW算法)
    Matlab DIP(瓦)ch10图像分割练习
    前景检测算法_2(帧差法1)
    目标跟踪学习笔记_3(particle filter初探2)
    基础学习笔记之opencv(2):haartraining前将统一图片尺寸方法
    Reading papers_5(与human activity analysis综述相关,ing...)
    总结系列_4(C++知识学习,续...)
    HMM学习笔记_2(从一个实例中学习HMM前向算法)
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3234497.html
Copyright © 2011-2022 走看看