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>

  • 相关阅读:
    BZOJ 1854: [Scoi2010]游戏( 二分图最大匹配 )
    BZOJ 2038: [2009国家集训队]小Z的袜子(hose) ( 莫队 )
    BZOJ 3555: [Ctsc2014]企鹅QQ( hash )
    BZOJ 2226: [Spoj 5971] LCMSum( 数论 )
    BZOJ 3505: [Cqoi2014]数三角形( 组合数 )
    BZOJ 2510: 弱题( 矩阵快速幂 )
    BZOJ 1009: [HNOI2008]GT考试( dp + 矩阵快速幂 + kmp )
    BZOJ 1090: [SCOI2003]字符串折叠( 区间dp )
    HDU 2295 Radar dancing links 重复覆盖
    ZOJ 3209 Treasure Map dancing links
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3234497.html
Copyright © 2011-2022 走看看