您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:自动隐藏的Sticky的Header,JavaScript日

新葡亰496net:自动隐藏的Sticky的Header,JavaScript日

发布时间:2019-09-17 06:17编辑:新葡亰官网浏览(178)

    自动隐敝的Sticky的Header

    2015/07/22 · CSS · Header, Sticky

    本文由 伯乐在线 - 吴鹏煜 翻译,JustinWu 校稿。未经许可,禁止转发!
    保加利亚语出处:osvaldas.info。招待插手翻译组。

    让Sticky Header自动掩盖是一个一举两得的好格局,一来能够在任何页面任何地方都可以访谈到导航条,二来能够节省页面空间。作者的顾客Easy Shine就十一分愿意在团结的网址上应用这些技术,那么些技艺何况也在自己的网址上贯彻了(viewport小于768px时方可观察效能)。

    使导航条固定

    XHTML

    <header class="header" role="banner"> <!-- ... --> </header>

    1
    2
    3
    <header class="header" role="banner">
        <!-- ... -->
    </header>

    CSS

    .header { width: 100%; height: 7.5em; position: fixed; z-index: 1000; top: 0; left: 0; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .header
    {
        width: 100%;
        height: 7.5em;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
    }

    那边有局部浅显易懂的HTML/CSS代码,无论页面滚动到哪个地方,导航条都会稳固在页面最上端。今后,大家怎么着让它自动遮盖?

    上学材质

    <h4>只必要引进一个id为lanren的div,外加js以及css就可以完结这种功效,当然,css3的效果与利益,低版本浏览器下不恐怕达成,尽也许少的代码,方便使用的html css js,才是我们追求的最为!

    今昔大家来总结运用一下所学知识,来落到实处三个JavaScript日志操作对象的实例,大家须要的是那多少个公文:

    那是过大年的时候自身写的js滚动条插件的源码,做出的功效要好并不好听,正因为做的并不令人满意所以回头重新加强和深远学习js,这几个插件有如下多少个不太舒适的地点:

    活动隐蔽导航条

    「自动遮掩」意味着当顾客在往下滚动页面时导航条将会化为乌有,但当客户有望要求导航条的时候又能让它出现:客户已经滚动到页面底部,恐怕发轫向上滚动时。导航条的藏身至少有三种情势:交互式和轻巧式。

    鼠标滚轴事件,思索到包容性:

    前言: (写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------JasonZhang
    web开采已现世多年,技艺成熟且学习平台湾大学面积,作者针对内部细节从本质上海展览中心开解释.力求彻底.

            myLog.js:首要功能是营造myLogger构造函数、增加行、加多节点、css调控。

    内容的过度效果,能够参谋QQ顾客端方今会话列表里的滚动条,它的滚动非常的平缓,简单来讲便是贫乏动画过渡效果。

    交互式

    交互式摄像演示

    交互式的意味是,导航条会直接地,也许立时响应页面滚动事件,这种样式也许会由于它操作起来的以为,从客户体验看来是二个精美的小细节。可是它也是有倒霉的另一方面:这种方式的本色决定了她必得求依据于JavaScript,大家不能够选择JS事件节流阀(在钦命的小时周期内只调用某些函数壹次)。基本上那就意味着每回滚动事件发生都要发出总括,况且会毫无意义的占领CPU。幸运的是,大繁多状态下那只是论战,实际上因为总括量实在太微乎其微而平凡不会碰着这种难题。

    滚动事件产生时,JS算法会总计并修改CSS中的top属性。

    JavaScript

    //... window.addEventListener( 'scroll', function() { //... if( wScrollCurrent <= 0 ) // 滚动到页面顶端; 成分保持在页面最上部element.style.top = '0px'; else if( wScrollDiff > 0 ) // 向上滚动事件; 成分插入页面 element.style.top = ( elTop > 0 ? 0 : elTop ) 'px'; else if( wScrollDiff < 0 ) // 向下滚动事件 { if( wScrollCurrent wHeight >= dHeight - elHeight ) // 滚动到页面底部; 成分插入页面 element.style.top = ( ( elTop = wScrollCurrent wHeight - dHeight ) < 0 ? elTop : 0 ) 'px'; else // 向下滚动事件; 成分消失 element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) 'px'; } //... }); //...

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    //...
    window.addEventListener( 'scroll', function()
    {
        //...
        if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部
            element.style.top = '0px';
     
        else if( wScrollDiff > 0 ) // 向上滚动事件; 元素插入页面
            element.style.top = ( elTop > 0 ? 0 : elTop ) 'px';
     
        else if( wScrollDiff < 0 ) // 向下滚动事件
        {
            if( wScrollCurrent wHeight >= dHeight - elHeight )  // 滚动到页面底部; 元素插入页面
                element.style.top = ( ( elTop = wScrollCurrent wHeight - dHeight ) < 0 ? elTop : 0 ) 'px';
     
            else // 向下滚动事件; 元素消失
                element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) 'px';
        }
        //...
    });
    //...

    firefox

    采纳DOMMouseScroll,但该事件供给运用add伊芙ntListener()来绑定;

    ff中采纳事件指标中的detail属性来赢得滚轮滚动的值,向上滚是负值,向下滚是正在;

    为了统一起一滚动方向的值的正负一致,施行取反操作;

    栗子:

    document.addEventListener('DOMMouseScroll',function(e) {

    var oEvent = e || event;

    alert(e.detail);

    },false);

    </h4>
    <h5>表明:能够在复选框的随意点击都会师世效果!</h5>
    废话相当的少说,先上效果.

            LD.js:重要作用是对剧本和字符串制定准绳、构造命名空间和基于Id、className抽取对象。

    并不算完美的包容性,在IE6、7下的style照旧有个别不满。

    简单式

    轻易式录制演示

    这种格局,取决于JavaScript节流阀的周期设置,或然不会有太多“获得回应”的以为。不管怎么说,这种样式对CPU会相比和煦,加之动画是依附CSS来落实的,那代表大家的想象力能够尽情宣布。

    和事先交互式区别的是,这里的JavaScript并不直接改变CSS的质量,而是为成分插入或移除header--hidden这个CSS类

    JavaScript

    //... window.addEventListener( 'scroll', throttle( throttleTimeout, function() { //... if( wScrollCurrent <= 0 ) // 滚动到页面最上端; 成分保持在页面最上端 removeElementClass( element, elClassHidden ); else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // 向上滚动事件; 成分插入页面 removeElementClass( element, elClassHidden ); else if( wScrollDiff < 0 ) // 向下滚动事件 { if( wScrollCurrent wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // 滚动到页面尾部; 成分插入页面 removeElementClass( element, elClassHidden ); else // 向下滚动事件; 元素消失 addElementClass( element, elClassHidden ); } //... })); //...

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    //...
    window.addEventListener( 'scroll', throttle( throttleTimeout, function()
    {
        //...
        if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部
            removeElementClass( element, elClassHidden );
     
        else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // 向上滚动事件; 元素插入页面
            removeElementClass( element, elClassHidden );
     
        else if( wScrollDiff < 0 ) // 向下滚动事件
        {
            if( wScrollCurrent wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // 滚动到页面底部; 元素插入页面
                removeElementClass( element, elClassHidden );
     
            else // 向下滚动事件; 元素消失
                addElementClass( element, elClassHidden );
        }
        //...
    }));
    //...

    在CSS中大家如此定义:

    JavaScript

    .header { -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); -webkit-transition-property: -webkit-transform; transition-property: transform; } .header--hidden { -webkit-transform: translateY( -100% ); -ms-transform: translateY( -100% ); transform: translateY( -100% ); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .header
    {
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
     
        -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
        transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
     
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;
    }
     
    .header--hidden
    {
        -webkit-transform: translateY( -100% );
        -ms-transform: translateY( -100% );
        transform: translateY( -100% );
    }

    chrome,firefox,safair,ie,opera等

    使用mousewheel;

    这一个浏览器中动用事件目的的wheelDelta属性来获取滚轮滚动的值,上滚为正,下滚为负;

    栗子:

    document.onmousewheel = function(e) {

    var oEvent = e || event;

    console.log(e.wheelDelta);

    };

    案例--退换成分的尺寸

    HTML

    <div id="box"></div>

    CSS

    #box {width: 200px;height: 300px; background: orange;}

    JS

    window.onload=function() {

    var oBox =document.getElementById('box');

    //判别方向

    var down =true;

    if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {

    /*火狐*/

    oBox.addEventListener("DOMMouseScroll",function(e) {

    varoEvent = e ||event;

    /*合并滚动值,同一方向值要么为正值,要么为负值*/

    if(-oEvent.detail<0) {

    //向下

    down =true;

    }else{

    //向上

    down =false;

    }

    changeSize(down);

    },false)

    }else{

    oBox.onmousewheel=function(e) {

    varoEvent = e ||event;

    if(e.wheelDelta<0) {

    down =true;

    }else{

    down =false;

    }

    changeSize(down);

    };

    }

    function changeSize(down) {

    if(down) {

    oBox.style.height= oBox.offsetHeight 10 'px';

    }

    else{

    oBox.style.height= oBox.offsetHeight-10 'px';

    }

    }

    };

    新葡亰496net 1

            test.js:主要成效是对窗体加多事件,并测验mylog中部分函数的可用性。

    体制的不周详,譬如鼠标悬浮才显示滚动条,移除后潜伏这种效应都未曾写。

    导航条的额外的部分景色

    录像演示

    稍微时候,特别在主页中时,在页面顶上部分使用越来越大的导航条有利于得到访问者的小心,我们需求三个额外的CSS类来支配导航条高度:

    CSS

    .header--narrow { height: 5em; }

    1
    2
    3
    4
    .header--narrow
    {
        height: 5em;
    }

    不过这些新定义的CSS类是由JavaScript来调控什么利用的——在页面初步滚动时抬高,并在滚动到页面顶上部分时移除。

    JavaScript

    // ... window.addEventListener( 'scroll', throttle( throttleTimeout, function() { // ... if( wScrollCurrent > elNarrowOffset ) // toggles "narrow" classname { if( !hasElementClass( element, elClassNarrow ) ) addElementClass( element, elClassNarrow ); } else removeElementClass( element, elClassNarrow ); // ... })); // ...

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // ...
    window.addEventListener( 'scroll', throttle( throttleTimeout, function()
    {
        // ...
        if( wScrollCurrent > elNarrowOffset ) // toggles "narrow" classname
        {
            if( !hasElementClass( element, elClassNarrow ) )
                addElementClass( element, elClassNarrow );
        }
        else removeElementClass( element, elClassNarrow );
        // ...
    }));
    // ...

    鼠标滚抽滚动事件的包装

    /*

    * 鼠标滚轴滚动事件封装

    * @param target:增添事变的靶子

    * @param fn: 鼠标滚轴滚动后须求达成的效能函数

    */

    function wheelFn(target,fn) {

    /*

    * 判定方向

    * @param {e} 事件指标

    * true: 向下滚动

    */

    function direction(e) {

    var oEvent = e ||event;

    if(e.wheelDelta) {

    if(e.wheelDelta<0) {

    down =true;

    }else{

    down =false;

    }

    }else{

    if(- e.detail<0) {

    down =true;

    }else{

    down =false;

    }

    }

    fn(down);

    /* 阻止系统的默许事件 */

    oEvent.preventDefault&& oEvent.preventDefault();

    return false;

    }

    /*

    * 事件绑定

    * @param target: 绑定事件的对象

    * @param type: 绑定的风云类型

    * @param fn

    */

    function bandEvent(target,type,fn) {

    if(target.attachEvent) {

    target.attachEvent('on' type,fn);

    }else{

    target.addEventListener(type,fn,false);

    }

    }

    /*

    * 规定鼠标滚抽滚动的自由化

    */

    var down =true;

    /* 浏览器包容的拍卖 */

    if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {

    bandEvent(target,"DOMMouseScroll",direction);

    }else{

    bandEvent(target,'mousewheel',function(e) {

    direction(e);

    });

    }

    }

    波浪式动画.gif

            log.html:用于体现日志对象。

    内部结构的繁杂,要求调度内容结构。

    示范

    其一德姆o的源代码中归纳了纯JavaScript(包容IE9 )和依据于jQuery的三种落成方式,就算去研讨去行使啊!

    Demo地址

    1 赞 收藏 评论

    打包使用案例--鼠标滚轴事件 自定义滚动条拖拽效果

    HTML

    <div id="wrap">

    <div id="list">

    <ul><li><a href="javascript:;"><img src="...jpg"></a></li><li><a href="javascript:;"><img src="...jpg"></a></li></ul>

    </div><div id="scroll"><div id="bar"></div></div>

    </div>

    CSS

    div,ul,li,a,img {padding: 0;margin: 0;list-style: none;text-decoration: none;}

    #wrap {overflow: hidden;width: 600px;height: 550px;margin: 50px auto;}

    #list {position: relative;width: 600px;height: 540px;overflow: hidden;}

    #list ul {position: absolute;top: 0;left: 0;overflow: hidden;width: 2100px;height: 540px;}

    #list li {float: left;}

    #list img {display: inline-block;*display: inline;width: 350px;height: 540px;margin-right: 20px;}

    #scroll {position: relative;width: 600px;height:10px;background-color: #ccc;border-radius: 5px;}

    #bar {position: absolute;top: 0;left: 0;width: 100px;height: 10px;background: orangered;border-radius: 5px;}

    JS

    window.onload = function() {

    var oWrap = document.getElementById('wrap');

    var oUL = document.getElementsByTagName('ul')[0];

    var oScroll = document.getElementById('scroll');

    var oBar = document.getElementById('bar');

    var l = 0;

    //用于方向的显明

    var down = true;

    /* 图片总移动范围 */

    var moveAreaImg = oUL.offsetWidth - oWrap.offsetWidth;

    /* 滚动条总移动的限制 */

    var moveAreaBar = oScroll.offsetWidth - oBar.offsetWidth;

    //1.鼠标按下时

    oBar.onmousedown = function(e) {

    var oEvent = e || event;

    //2.收获成分的最早地点

    var x = oEvent.clientX - oBar.offsetLeft;

    //3.鼠标按下并活动时,元素随之移动

    document.onmousemove = function(ev) {

    var oEv = ev || event;

    //4.偏移距离

    l = oEv.clientX - x;

    changePosition(l);

    };

    //7.鼠标弹起时停止运动

    document.onmouseup = function() {

    document.onmousemove = null;

    document.onmouseup = null;

    oBar.releaseCapture && oBar.releaseCapture();

    };

    //8.阻止暗许事件

    oBar.setCapture && oBar.setCapture();

    return false;

    };

    /*

    * 移动位置

    * @param pos偏移距离

    */

    function changePosition(pos) {

    //5.限定移动区域

    if (l <= 0) {

    l = 0;

    }

    if (l >= (oScroll.offsetWidth - oBar.offsetWidth)) {

    l = oScroll.offsetWidth - oBar.offsetWidth;

    }

    //比例

    var scale = l / moveAreaBar;

    //6.指标成分的运动

    oBar.style.left = l 'px';

    //图片列表偏移距离:图片列表总移动范围*移动的比重

    oUL.style.left = -(moveAreaImg*scale) 'px';

    }

    /*

    * 鼠标滚轴滚动事件封装

    * @param target:增加事变的指标

    * @param fn: 鼠标滚轴滚动后须要贯彻的法力函数

    *

    */

    function wheelFn(target,fn) {

    /*

    * 事件绑定

    * @param target: 绑定事件的对象

    * @param type: 绑定的风波类型

    * @param fn

    */

    function bandEvent(target,type,fn) {

    if (target.attachEvent) {

    target.attachEvent('on' type, fn);

    } else {

    target.addEventListener(type, fn, false);

    }

    }

    /*

    * 判定方向

    * @param {e} 事件目的

    * true: 向下滚动

    */

    function direction(e) {

    var oEvent = e || event;

    if (oEvent.wheelDelta) {

    if (oEvent.wheelDelta < 0) {

    //向下滚动

    down = true;

    } else {

    //向上滚动

    down = false;

    }

    } else {

    if (-oEvent.detail < 0) {

    down = true;

    } else {

    down = false;

    }

    }

    fn(down);

    /* 阻止系统的默许事件 */

    oEvent.preventDefault && oEvent.preventDefault();

    return false;

    }

    /* 鼠标滚轴事件的相配写法 */

    if (window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {

    bandEvent(target, "DOMMouseScroll", direction);

    } else {

    bandEvent(target, 'mousewheel', function (e) {

    direction(e);

    });

    }

    }

    /*

    *鼠标滚动时,滚动条也时有发生位移

    */

    wheelFn(oWrap,function(down) {

    if (down) {

    //向下滚动的速度

    l = 22;

    //产生偏移

    changePosition(l);

    } else {

    l -= 22;

    changePosition(l);

    }

    });

    };

    -

    新葡亰496net 2

    滚轴事件案例

    率先定义三个id为lanren的div.
    <pre>
    <div id="lanren"></div>
    </pre>
    第二css也特别简单,自定义二个动画片,详细情况请继续向下看∨

    以下是逐个文件代码:

    滚动条这多少个图片毕竟不是丹青,本人切图切的真是恶心到爆了...囧

    关于作者:吴鹏煜

    新葡亰496net 3

    腹心、勇气、创新意识和传说。(新浪果壳网:@Nappp) 个人主页 · 小编的作品 · 13

    新葡亰496net 4

    卷入案例--退换背景颜色

    新葡亰496net 5

    鼠标滚轴案例

    wheelFn(oBox,changeBg);

    var r =parseInt(Math.random()*255),

    g =parseInt(Math.random()*255),

    b =parseInt(Math.random()*255),

    function changeBg(down) {

    if(down) {

    //oBox.style.height = oBox.offsetHeight 10 'px';

    oBox.style.backgroundColor='rgb(' r ',' g ',' b ')';

    r ,g ,b ;

    if(r <0|| g <0||b <0) {return false;}

    }else{

    //oBox.style.height = oBox.offsetHeight - 10 'px';

    oBox.style.backgroundColor='rgb(' r ',' g ',' b ')';

    r--,g--,b--;

    }

    }

    <pre>
    .wrapper{ overflow:hidden; margin:0 auto; position:relative;}
    .wrapper input{position:absolute}
    .wrapper input.grow{-webkit-animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275);-moz-animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275);animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275)}
    @-webkit-keyframes grow{
    0%{-webkit-transform:scale(1)}
    30%{-webkit-transform:scale(2.5)}
    100%{-webkit-transform:scale(1)}
    }
    @-moz-keyframes grow{
    0%{-moz-transform:scale(1)}
    30%{-moz-transform:scale(2.5)}
    100%{-moz-transform:scale(1)}
    }
    @keyframes grow{
    0%{transform:scale(1)}
    30%{transform:scale(2.5)}
    100%{transform:scale(1)}
    }
    </pre>
    到了最注重的时候了,最主题的代码,先创制input复选框标签然后增添到div上,..详细的情况请往上面看∨
    <pre>
    <script>
    var RES_X = 20;//横向成立input

    test.js

    完整来说照旧得以看的,依旧枯竭一个动画片。在写那一个插件意识到温馨的插件用到了一部分比较基础的函数,于是想到把那一个函数应该封装起来,近年来依旧在深深学习js,把手头上那本书看完就应当初始写这么些基础函数的插件了,当然,动画引擎至关重要。话非常的少说,源码在此(注意:本插件完整版的是有图表的,请在文末附属类小部件中下载完整的插件):

    var RES_Y = 20;//竖向创立input
    var SIZE = 22;
    if (/iphone|ipad|android/ig.test(navigator.userAgent)) {
    RES_X = 10;
    RES_Y = 10;
    SIZE = 25
    }
    var entities = [];
    var wrapper = document.getElementById('lanren');
    wrapper.className = 'wrapper';
    wrapper.style.width = (RES_X * SIZE) 'px';
    wrapper.style.height = (RES_Y * SIZE) 'px';
    for (var x = 0; x < RES_X; x ) {
    for (var y = 0; y < RES_Y; y ) {
    var el = document.createElement('input');
    el.setAttribute('type', 'checkbox');
    wrapper.appendChild(el);
    var entity = {
    element: el,
    x: x * SIZE,
    y: y * SIZE
    }
    el.style.left = entity.x 'px';
    el.style.top = entity.y 'px';
    el.addEventListener('change', this.toggle.bind(this, entity));
    entities.push(entity)
    }
    }
    function toggle(targetEntity) {
    var checked = targetEntity.element.checked;
    entities.forEach(function(entity) {
    var dx = targetEntity.x - entity.x;
    var dy = targetEntity.y - entity.y;
    var distance = Math.sqrt(dx * dx dy * dy);
    setTimeout(function() {
    entity.element.checked = checked;
    entity.element.className = '';
    entity.element.offsetWidth;
    entity.element.className = 'grow'
    }, Math.round(distance * 1.8))
    })
    }
    setTimeout(function() {
    entities[0].element.checked = true;
    toggle(entities[0])
    }, 800);
    </script>
    </pre>
    笔没墨了!
    欲知详细情况,下节再讲!!!

    [javascript] view plaincopyprint?//向window对象里面加多贰个load事件  
    LD.addEvent(window,'load',function(){ 
        LD.log.writeRaw('This is raw'); 
     
        LD.log.writeRaw('<strong>This is bold!</strong>'); 
     
        LD.log.header('With a header'); 
     
        LD.log.write('write source:<strong>This is bold!</strong>'); 
         
        for(i in document){ 
                LD.log.write(i); 
            } 
    }); 
    //向window对象里面增添多个load事件
    LD.addEvent(window,'load',function(){
     LD.log.writeRaw('This is raw');

    CSS

     LD.log.writeRaw('<strong>This is bold!</strong>');

    复制代码 代码如下:

     LD.log.header('With a header');

    .lf_Scroll, .lf_Scroll li { padding: 0; margin: 0; list-style: none; font: 14px/24px "Helvetica Neue" ,Helvetica,Arial, 'Microsoft Yahei' ,sans-serif; outline: none; }
    .lf_Scroll { cursor: pointer; width: 10px; position: absolute; right: 0; top: 0; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
    .lf_ScrollFocus { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
    .lfs_Top, .lfs_Center, .lfs_Bottom { background: url('ScrollBar.gif'); width: 10px; height: 10px; }
    .lfs_Top { background-position: 1px 0px; }
    .lfs_Center { background-position: center 0; height: 100px; }
    .lfs_Bottom { background-position: -22px 0; }
    /*Developers config*/
    .rollDiv { height: 100%; width: 100%; overflow: hidden; position: relative; }

     LD.log.write('write source:<strong>This is bold!</strong>');
     
     for(i in document){
             LD.log.write(i);
      }
    });myLog.js[javascript] view plaincopyprint?// JavaScript Document  
     
    //myLogger的构造函数  
    function myLogger(id){ 
        id=id||"ICLogWindow"; 
     
        //日志窗体的援用  
        var logWindow=null; 
        //创制日志窗体  
        var createWindow=function(){ 
                var browserWindowSize = LD.getBrowserWindowSize(); 
                var top=(browserWindowSize.height-200)/2||0; 
                var left=(browserWindowSize.width-200)/2||0; 
     
                //使用UL  
                logWindow=document.createElement("UL"); 
                //在document下加多三个dom对象UL  
     
                //增加ID实行标志        
                logWindow.setAttribute("id",id); 
     
                //对窗体实行css样式调整  
                logWindow.style.position='absolute'; 
                logWindow.style.top=top 'px'; 
                logWindow.style.left=left 'px'; 
         
                logWindow.style.width='200px'; 
                logWindow.style.height='200px'; 
                logWindow.style.overflow='scroll'; 
                 
                logWindow.style.padding='0'; 
                logWindow.style.margin='0'; 
                logWindow.style.border='1px solid black'; 
                logWindow.style.backgroundColor='white'; 
                logWindow.style.listStyle='none'; 
                logWindow.style.font='10px/10px Verdana, Tahoma, Sans'; 
     
                //将窗体加多到页面上面  
                document.body.appendChild(logWindow); 
            } 
     
    //向日志窗体中增多一行  
        this.writeRaw=function(message){ 
                //若是最早窗体是不真实的,则转移日志窗体  
            if(!logWindow){ 
                    createWindow(); 
                } 
    //创建li的dom节点  
            var li=document.createElement('LI'); 
     
            //对窗体进行css样式调控  
             
            li.style.padding='2px'; 
            li.style.border='0'; 
            li.style.borderBottom='1px dotted black'; 
            li.style.margin='0'; 
            li.style.color='#000'; 
     
            //      验证message信息  
            if(typeof message == 'undefined'){ 
     
                    //在li里面添Gavin本节点。  
                    li.appendChild(  
                        document.createTextNode('Message is undefined')     
                        ); 
                }else if(typeof li.innerHTML!=undefined){ 
            //那是另一种情势的发挥  
                        li.innerHTML=message; 
                    }else{ 
                            li.appendChild( 
                                document.createTextNode(message)        
                            ); 
                        } 
                    logWindow.appendChild(li); 
                    return true; 
            }; 

    //对象字面量的办法宣示特权方法  
    //向日志窗体中加多一行,向输入的剧情开展简要管理  
    myLogger.prototype={ 
         
        write:function(message){ 
            if(typeof message=='string' && message.length==0 ){ 
                    return this.writeRaw('未有输入音信'); 
                 
            } 
            if(typeof message !='string'){ 
                    if(message.toString){ 
                        return this.writeRaw(message.toString()); 
                    }else{ 
                        return this.writeRaw(typeof message); 
                    } 
                } 
    //将超出号小于号实行正则调换来HTML标志  
            message=message.replace(/</g,"<").replace(/>/g,">"); 
            return this.writeRaw(message); 
        }, 
        header:function(message){ 
            message='<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">' message '</span>'; 
            return this.writeRaw(message); 
            } 
    }; 
    window['LD']['log'] = new myLogger(); 
    // JavaScript Document

    JavaScript

    //myLogger的构造函数
    function myLogger(id){
     id=id||"ICLogWindow";

    复制代码 代码如下:

     //日志窗体的援用
     var logWindow=null;
     //成立日志窗体
     var createWindow=function(){
             var browserWindowSize = LD.getBrowserWindowSize();
       var top=(browserWindowSize.height-200)/2||0;
       var left=(browserWindowSize.width-200)/2||0;

    /*
    * This plugin is defined on the simulation Webpage scroll bar, please insert after binding for DOM events
    *
    * Comment version: 1.0.0
    * Author:linkfly
    * Sina:为您聚集半世纪 |  cnblogs: | Email:linkFly6@live.com
    * date:2014-02-05 02:38:35
    *
    *
    * Dual licensed under the MIT and GPL licenses:
    *
    *
    *
    */
    (function (window, undefined) {
        //配置参数消息
        var config = {
            auto: true,
            height: 'auto',
            width: 'auto'
        };
        var linkFlyScroll = function (dom, options) {
            /// <summary>
            ///     1: 生成模仿滚动条对象,【请在本对象事业今后再为您钦命的对象绑定事件,不然你从前绑定的风云将不会议及展览开专门的工作】
            ///         1.1 - linkFlyScroll(dom) - 在钦命的dom上生成滚动条对象
            ///         1.2 - linkFlyScroll(dom,options) - 生成滚动条对象,同一时候提供一多元的参数允许你自定义配置该对象的职业模型
            /// </summary>
            /// <param name="dom" type="String Or element">
            ///     传入js的dom对象,大概为string类型的该对象ID
            /// </param>
            /// <param name="options" type="Json">
            ///     自定义配置该指标的做事模型,有如下选项:
            ///       [可选]auto(Boolean):当内容从未达到规定的标准容器的中度的时候,是不是自动遮盖滚动条,暗许为true(是)
            ///       [可选]height(Int Or String):私下认可单位为px,可以为int和String.值为auto则暗中同意使用css的万丈
            ///       [可选]width(Int Or String):暗许单位为px,可认为int和String.值为auto则暗中认可使用css的幅度
            /// </param>
            /// <returns type="linkFlyScroll" />
            if (typeof (dom) === 'string') {
    新葡亰496net:自动隐藏的Sticky的Header,JavaScript日志操作对象实例。            dom = document.getElementById(dom);
            }
            //未有一点名dom和尚未查找到有效的dom
            //linkFlyScroll("")、 linkFlyScroll(null)、linkFlyScroll(undefined)
            if (!dom || !dom.nodeType)
                return this;
            //创立容器对象
            var scrollObj = document.createElement('div');
            //深度克隆内容对象,并未有包蕴事件,所以必要等到linkFlyScroll对象工作甘休后才足感到该dom对象绑定事件
            var cloneObj = dom.cloneNode(true);
            scrollObj.className = 'rollDiv';
            scrollObj.appendChild(cloneObj);
            //替换页面上近期目标
            dom.parentNode.replaceChild(scrollObj, dom);
            return new linkFlyScroll.prototype.init(scrollObj, options ? options : {});
        };
        linkFlyScroll.prototype.init = function (dom, options) {
            /// <summary>
            ///     1: 本对象才是当真意义上行事的目的,特殊的干活办法是因为或者存在linkFlyScroll的静态调用和实例化调用
            ///         1.1 - init(dom,options) - 在钦赐的dom上变化滚动条对象
            /// </summary>
            /// <param name="dom" type="element">
            ///     dom对象
            /// </param>
            /// <param name="options" type="Json">
            ///     自定义配置该对象的行事模型,有如下选项:
            ///       [可选]auto(Boolean):当内容并未有达标容器的惊人的时候,是或不是自动遮盖滚动条,默感觉true(是)
            ///       [可选]height(Int Or String):私下认可单位为px,可感到int和String.值为auto则默许使用css的莫斯中国科学技术大学学
            ///       [可选]width(Int Or String):暗中同意单位为px,可感觉int和String.值为auto则暗中同意使用css的幅度
            /// </param>
            /// <returns type="linkFlyScroll" />
            /*
            * 本指标满含以下属性:
            * isDrag:是或不是正在拖拽滚动条
            * startTop:(职业中)滚动条开端滚动地方
            * endTop:(工作中)滚动条结束滚动地方
            * topLimit:滚动条最上部极限地点
            * bottomLimit:滚动条尾巴部分极限地方
            * context:内容Dom
            * scrollRadix:滚动基数
            * target:容器Dom
            */
            //当前this对象,为防守this指针在条件中会日常改动(举个例子绑定事件的时候),所以将日前指标保存起来
            var currScroll = this;
            //DOMElement
            if (dom.nodeType) {
                //保存容器和内容DOM
                currScroll.target = dom;
                currScroll.context = dom.firstChild;
                //合併配置参数
                currScroll.options = tool.extend(config, options);
                if (currScroll.options.width !== 'auto') {
                    dom.style.width = tool.convertValue(currScroll.options.width);
                }
                if (currScroll.options.height !== 'auto') {
                    dom.style.height = tool.convertValue(currScroll.options.height);
                }
                //查找到有效的dom
                while (currScroll.context.nodeType != 1) {
                    currScroll.context = currScroll.context.nextSibling;
                }
                //制造滚动条dom
                currScroll.scrollUl = document.createElement('ul');
                currScroll.scrollUl.className = 'lf_Scroll';
                currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Top'));
                currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Center'));
                currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Bottom'));
                currScroll.context.style.position = 'relative';
                //先呈以往页面上能力够读取地方数据
                dom.appendChild(currScroll.scrollUl);
                this.change();
                tool.addScrollEvent(currScroll.context, function (e) {
                    //绑定鼠标滚轮事件,3px滚动单位
                    if (e.wheel > 0) {//滚轮向上滚动
                        var currTop = currScroll.endTop -= 3;
                        currScroll.scrollEvent.call(currScroll, currTop);
                    } else {//滚轮向下滚动
                        var currTop = currScroll.endTop = 3;
                        currScroll.scrollEvent.call(currScroll, currTop);
                    }
                });
                //须求管理禁止文字在拖动的时候被选中  TODO
                //鼠标点下事件,要求决断是或不是是左键点击,如今右键也会兑现滚动  TODO
                tool.addEvent(currScroll.scrollUl, 'mousedown', function (e) {
                    mouseDown.call(currScroll, e);
                });
                //追加事件,为了更加好的客商体验在body上贯彻监听
                tool.addEvent(document.body, 'mousemove', function (e) {
                    if (currScroll.isDrag) {
                        //获取当前鼠标地方
                        var position = tool.getMousePos(e);
                        //当前滚动条top地方
                        var currTop = (currScroll.endTop position.y - currScroll.startTop);
                        //call是为着让this指针正确的指向本专业目的
                        currScroll.scrollEvent.call(currScroll, currTop);
                    }
                    return false;
                });
                //追加鼠标释放事件,为了正确的捕捉到释放事件在body上监听
                tool.addEvent(document.body, 'mouseup', function () {
                    mouseUp.call(currScroll, []);
                });
                var mouseDown = function (e) {
                    /// <summary>
                    ///     1: 鼠标按下事件
                    ///         1.1 - mouseDown(e) - 滚动条中鼠标按下滚动条事件
                    /// </summary>
                    /// <param name="e" type="Event">
                    ///     Event对象
                    /// </param>
                    /// <returns type="linkFlyScroll" />
                    currScroll.isDrag = true;
                    //获取当前鼠标y地方
                    currScroll.startTop = tool.getMousePos(e).y;
                    tool.addClass(currScroll.scrollUl, 'lf_ScrollFocus');
                    return false;
                };
                var mouseUp = function () {
                    /// <summary>
                    ///     1: 鼠标释放事件
                    ///         1.1 - mouseUp() - 滚动条中鼠标释放滚动条事件
                    /// </summary>
                    /// <returns type="linkFlyScroll" />
                    currScroll.isDrag = false;
                    currScroll.endTop = currScroll.scrollUl.style.top ? parseInt(currScroll.scrollUl.style.top) : 0;
                    tool.removeClass(currScroll.scrollUl, 'lf_ScrollFocus');
                    return false;
                };
                currScroll.scrollEvent = function (currTop) {
                    /// <summary>
                    ///     1: 滚动事件(核心),传入须求滚动的坐标就能够(滚动条top)
                    ///         1.1 - scroll伊夫nt(currTop) - 核心滚动事件
                    /// </summary>
                    /// <param name="currTop" type="Int">
                    ///     滚动条顶端距离上一层容器的top值
                    /// </param>
                    /// <returns type="void" />
                    if (currTop <= currScroll.topLimit || currTop < 0) {//顶上部分终端
                        currTop = currScroll.topLimit;
                    } else if (currTop >= currScroll.bottomLimit) {//尾巴部分终端
                        currTop = currScroll.bottomLimit;
                    }
                    //滚动条偏移效果
                    currScroll.scrollUl.style.top = currTop 'px';
                    var tempTop = parseInt(currScroll.context.style.top ? currScroll.context.style.top : 0);
                    //debug code
                    //                document.getElementById('postionInfo').innerHTML = 'currTop:' currTop

       //使用UL
       logWindow=document.createElement("UL");
       //在document下加多三个dom对象UL

    • ' 滚动基数:' currScroll.scrollRadix ' bottomLimit:' currScroll.bottomLimit ' endTop:' currScroll.endTop ' startTop:' currScroll.startTop " Y:" currTop " offsetTop:" currScroll.scrollUl.offsetTop " compute:" (currTop * currScroll.scrollRadix * -1) 'px';
                      //text code
                      //内容滚动:当前滚动条top*基数取负数
                      currScroll.context.style.top = currTop * currScroll.scrollRadix * -1 'px';
                  };
                  return currScroll;
              };
          };
          linkFlyScroll.prototype.init.prototype.change = function () {
              /// <summary>
              ///     1: 滚动条内容退换函数
              ///         1.1 - change() - 本函数代表刷新本滚动条对象的数额,在少数情状下,内容的多少是一直在调换的,能够调用本函数对当前滚动条对象刷新数据
              /// </summary>
              /// <returns type="linkFlyScroll" />
              /*
              * linkFlyScroll富含的品质首要在本函数中起头化或重复定义:
              * isDrag:是还是不是正在拖拽滚动条
              * startTop:(专业中)滚动条最早滚动地点
              * endTop:(职业中)滚动条甘休滚动地方
              * topLimit:滚动条最上端极限地方
              * bottomLimit:滚动条底部极限地点
              * context:内容Dom
              * scrollRadix:滚动基数
              * target:容器Dom
              */
              //重新恢复设置或读取一雨后冬笋数据
              var currScroll = this;
              currScroll.isDrag = false,
              currScroll.startTop = 0,
              currScroll.endTop = (currScroll.scrollUl.style.top ? parseInt(currScroll.scrollUl.style.top) : 0),
              currScroll.topLimit = currScroll.target.scrollTop,
              currScroll.bottomLimit = currScroll.target.clientHeight,
              currScroll.scrollRadix = 10;
              //得出滚动条的惊人:内容高度*(容器高度/内容中度=容器占内容百分比)
              var scrollPx = currScroll.target.clientHeight * (currScroll.target.clientHeight / currScroll.context.offsetHeight);
              //滚动条高度
              currScroll.scrollUl.childNodes[1].style.height = scrollPx 'px';
              if (currScroll.context.clientHeight <= currScroll.target.clientHeight && currScroll.options.auto) {
                  currScroll.scrollUl.style.display = 'none';
              } else {
                  currScroll.scrollUl.style.display = 'block';
                  //当滚动条展现,考订最大任务数据
                  currScroll.bottomLimit -= currScroll.scrollUl.offsetHeight;
              }
              //设置滚动条滚动基数(滚动条没滚动1px内容滚动像素):(内容惊人-容器高度[因为脚下容器已经呈现了一屏])/滚动条top(滚动条空白可滚动中度)
              currScroll.scrollRadix = (currScroll.context.offsetHeight - currScroll.target.clientHeight) / currScroll.bottomLimit;
              return currScroll;
          };
          linkFlyScroll.prototype.init.prototype.roll = function (value) {
              /// <summary>
              ///     1: 滚动条偏移方法
              ///         1.1 - roll(value) - 滚动条滚动方法
              /// </summary>
              /// <param name="value" type="Int">
              ///     滚动条款的滚动的比例
              /// </param>
              /// <returns type="linkFlyScroll" />
              var currScroll = this;
              if (typeof (value) !== 'number') {
                  return currScroll;
              }
              var currTop = (currScroll.bottomLimit - currScroll.topLimit) * value / 100;
              currScroll.scrollEvent(currTop);
              currScroll.endTop = currTop;
              return currScroll;
          };
          /*
          * 工具类
          */
          var tool = {
              setClass: function (element, className) {
                  /// <summary>
                  ///     1: 设置成分节点的class属性
                  ///         1.1 - setClass(element,className) - 设置成分节点的class属性,如没有该节点则开创该节点,并赶回修改后的节点指标
                  /// </summary>
                  /// <param name="element" type="Element Or String">
                  ///     传入String则开创该节点,否则修改该节点
                  /// </param>
                  /// <param name="className" type="String">
                  ///     Class Name
                  /// </param>
                  /// <returns type="Element" />
                  if (typeof element === 'string') {
                      element = document.createElement(element);
                  }
                  element.className = className;
                  return element;
              },
              hasClass: function (element, className) {
                  /// <summary>
                  ///     1: 剖断成分是还是不是有class
                  ///         1.1 - hasClass(element,className) - 推断成分是不是有class,在作业中那多少个(基本未有本场馆包车型客车发出)和有该class重回true,不然再次来到false
                  /// </summary>
                  /// <param name="element" type="Element Or String">
                  ///     节点指标
                  /// </param>
                  /// <param name="className" type="String">
                  ///     Class Name
                  /// </param>
                  /// <returns type="Element" />
                  if (!element || element.nodeType !== 1)//让老大通过,外面不开展管理
                      return true;
                  var elementClassName = element.className;
                  if (elementClassName.length < 1) {
                      return false;
                  }
                  if (elementClassName == className || elementClassName.match(new RegExp("(^|\s)" className "(\s|$)"))) {
                      return true;
                  }
                  return false;
              },
              addClass: function (element, className) {
                  /// <summary>
                  ///     1: 为元素【追加】class
                  ///         1.1 - addClass(element,className) - 为要素【追加】class,并赶回修改后的class
                  /// </summary>
                  /// <param name="element" type="Element Or String">
                  ///     节点指标
                  /// </param>
                  /// <param name="className" type="String">
                  ///     Class Name
                  /// </param>
                  /// <returns type="Element" />
                  if (!tool.hasClass(element, className)) {
                      if (element.className.length < 1) {
                          element.className = className;
                      } else {
                          element.className = ' ' className;
                      }
                  }
                  return element;
              },
              removeClass: function (element, className) {
                  /// <summary>
                  ///     1: 为要素移除class
                  ///         1.1 - addClass(element,className) - 为要素移除class,并回到修改后的class
                  /// </summary>
                  /// <param name="element" type="Element Or String">
                  ///     节点指标
                  /// </param>
                  /// <param name="className" type="String">
                  ///     Class Name
                  /// </param>
                  /// <returns type="Element" />
                  if (tool.hasClass(element, className)) {
                      var reg = new RegExp("(^|\s)" className "(\s|$)");
                      element.className = element.className.replace(reg, '');
                  }
                  return element;
              },
              css: function (element, key) {
                  /// <summary>
                  ///     1: 获取成分css钦命的属性值
                  ///         1.1 - css(element,className) - 获取成分css钦赐的属性值
                  /// </summary>
                  /// <param name="element" type="Element Or String">
                  ///     节点指标
                  /// </param>
                  /// <param name="key" type="String">
                  ///     要获得的css属性
                  /// </param>
                  /// <returns type="String" />
                  return element.currentStyle ? element.currentStyle[key] : document.defaultView.getComputedStyle(element, false)[key];
              },
              addEvent: function (element, type, fn) {
                  /// <summary>
                  ///     1: 为要素追加事件
                  ///         1.1 - css(element, type, fn) - 为成分追加事件,函数中this指向事件源
                  /// </summary>
                  /// <param name="element" type="Element Or String">
                  ///     节点指标
                  /// </param>
                  /// <param name="type" type="String">
                  ///     追加的平地风波名,不含字符on
                  /// </param>
                  /// <param name="fn" type="Function">
                  ///     事件目的
                  /// </param>
                  /// <returns type="void" />
                  if (element.attachEvent) {
                      element['e' type fn] = fn;
                      element[type fn] = function () { element['e' type
    • fn](window.event); }
                      element.attachEvent('on' type, element[type fn]);
                  } else if (element.addEventListener) {
                      element.addEventListener(type, fn, false);
                  }
              },
              //        removeEvent: function (element, type, fn) {
              //            /// <summary>
              //            ///     1: 为要素删除事件,本函数并未有用到
              //            ///         1.1 - remove伊芙nt(element, type, fn) - 为因素删除事件
              //            /// </summary>
              //            /// <param name="element" type="Element Or String">
              //            ///     节点目的
              //            /// </param>
              //            /// <param name="type" type="String">
              //            ///     删除的事件名
              //            /// </param>
              //            /// <param name="key" type="String">
              //            ///     删除的平地风波的函数名
              //            /// </param>
              //            /// <returns type="void" />
              //            if (element.detachEvent) {
              //                element.detachEvent('on' type, element[type
    • fn]);
              //                element[type fn] = null;
              //            } else if (element.removeEventListener) {
              //                element.removeEventListener(type, fn, false);
              //            }
              //        },
              addScrollEvent: function (element, fn) {
                  /// <summary>
                  ///     1: 追加ScrollEvent事件
                  ///         1.1 - addScroll伊芙nt(element,fn) - 在要素上加码ScrollEvent事件(特殊事件,在要素上鼠标滚轮滚动事件)
                  /// </summary>
                  /// <param name="element" type="Element Or String">
                  ///     成分节点
                  /// </param>
                  /// <param name="fn" type="Function">
                  ///     事件措施
                  /// </param>
                  /// <returns type="void" />
                  var bindScrollFn = function (e) {
                      e = e || window.event;
                      //剖断滚轮滚动方向:Firefox和其他浏览器分歧
                      e.wheel = (e.wheelDelta ? e.wheelDelta : -e.detail) > 0 ? 1 : -1; // 通过事件判定鼠标滚轮反向,1是前进,-1是向下
                      //阻止浏览器暗中认可行为
                      if (e.preventDefault) { //ff
                          e.preventDefault();
                      } else {
                          e.returnValue = false; //ie
                      }
                      fn.call(element, e);
                  }
                  if (document.addEventListener) {
                      //ff
                      element.addEventListener('DOMMouseScroll', bindScrollFn, false);
                      //w3c
                      element.addEventListener('mousewheel', bindScrollFn, false);
                  } else//ie
                  {
                      element.attachEvent('onmousewheel', bindScrollFn);
                  }
              },
              getEvent: function () {
                  /// <summary>
                  ///     1: 获取Event对象
                  ///         1.1 - get伊芙nt() - 在无参数的动静下获得Event对象,同时包容性处理IE和FF
                  /// </summary>
                  /// <returns type="Event" />
                  if (document.all) {
                      return window.event;
                  }
                  func = getEvent.caller;
                  while (func != null) {
                      var arg0 = func.arguments[0];
                      if (arg0) {
                          if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                              return arg0;
                          }
                      }
                      func = func.caller;
                  }
                  return null;
              },
              getMousePos: function (ev) {
                  /// <summary>
                  ///     1: 获取当前鼠标坐标
                  ///         1.1 - getMousePos(ev) - 获取当前鼠标坐标,包容性管理,重回的对象格式:{ x:鼠标x坐标 , y:鼠标y坐标 }
                  /// </summary>
                  /// <param name="ev" type="Event">
                  ///     伊夫nt事件目的
                  /// </param>
                  /// <returns type="Json" />
                  if (!ev) {
                      ev = currScroll.getEvent();
                  }
                  if (ev.pageX || ev.pageY) {
                      return {
                          x: ev.pageX,
                          y: ev.pageY
                      };
                  }
                  if (document.documentElement && document.documentElement.scrollTop) {
                      return {
                          x: ev.clientX document.documentElement.scrollLeft
    • document.documentElement.clientLeft,
                          y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop
                      };
                  }
                  else if (document.body) {
                      return {
                          x: ev.clientX document.body.scrollLeft - document.body.clientLeft,
                          y: ev.clientY document.body.scrollTop - document.body.clientTop
                      };
                  }
              },
              extend: function (oldObj, newObj) {
                  /// <summary>
                  ///     1: 将七个目的开展统一
                  ///         1.1 - extend(oldObj,newObj) - 将四个目的合并,并赶回合併后的指标,选拔clone的办法贯彻,所以不会对四个对象爆发别的影响
                  /// </summary>
                  /// <param name="oldObj" type="Object">
                  ///     要统一的目的A,该指标作为基础对象,将新对象的同名属性覆盖到基础对象中
                  /// </param>
                  /// <param name="newObj" type="Object">
                  ///     要统一的目的B
                  /// </param>
                  /// <returns type="Object" />
                  var tempObj = tool.clone(oldObj);
                  for (var key in newObj) {
                      if (newObj.hasOwnProperty(key) && !tempObj.hasOwnProperty(key)) {
                          tempObj[key] = newObj[key];
                      }
                  }
                  return tempObj;
              },
              clone: function (obj) {
                  /// <summary>
                  ///     1: 克隆七个对象
                  ///         1.1 - clone(obj) - 克隆一个指标,并回到克隆后的新指标,该对象的原型是被克隆的对象
                  /// </summary>
                  /// <param name="obj" type="Object">
                  ///     要克隆的对象
                  /// </param>
                  /// <returns type="Object" />
                  function Clone() { }
                  Clone.prototype = obj;
                  var newObj = new Clone();
                  for (var key in newObj) {
                      if (typeof newObj[key] == "object") {
                          newObj[key] = tool.clone(newObj[key]);
                      }
                  }
                  return newObj;
              },
              convertValue: function (value) {
                  /// <summary>
                  ///     1: 将数值调换为使得的数值
                  ///         1.1 - convertValue(value) - 将Json配置的css数值调换为可行的数值,请确认保证value的值不为"auto"
                  /// </summary>
                  /// <param name="value" type="Object">
                  ///     要转移的数值
                  /// </param>
                  /// <returns type="Object" />
                  var reg = /^d $/g;
                  if (typeof (value) === 'number' || reg.test(value)) {
                      return value 'px';
                  } else
                      return value;
              }
          };
          //注册到window下
          window.linkFlyScroll = linkFlyScroll;
          //注册到window.so命名空间下
          if (!window.so) {
              window.so = {};
          }
          window.so.scroll = window.linkFlyScroll;
      })(window);

       //增加ID举行标志     
       logWindow.setAttribute("id",id);

    代码示例

       //对窗体进行css样式调整
       logWindow.style.position='absolute';
       logWindow.style.top=top 'px';
       logWindow.style.left=left 'px';
     
       logWindow.style.width='200px';
       logWindow.style.height='200px';
       logWindow.style.overflow='scroll';
       
       logWindow.style.padding='0';
       logWindow.style.margin='0';
       logWindow.style.border='1px solid black';
       logWindow.style.backgroundColor='white';
       logWindow.style.listStyle='none';
       logWindow.style.font='10px/10px Verdana, Tahoma, Sans';

    复制代码 代码如下:

       //将窗体增加到页面下面
       document.body.appendChild(logWindow);
      }

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <head>
        <title></title>
        <link href="linkFlyScroll/linkFlyRollCss.css" rel="stylesheet" type="text/css" />
        <script src="linkFlyScroll/linkFlyScroll-1.0.0.js" type="text/javascript"></script>
        <script type="text/javascript">
            window.onload = function () {
                var config = {
                    auto: true, //当内容未有达到容器的中度的时候,是还是不是自动掩饰滚动条
                    height: '100', //滚动条对象工作中度(超越该低度则呈现滚动条),auto取对象当前高
                    width: 'auto'//滚动条对象工作幅度
                };
                var scrollObj = so.scroll('obj', config);
                //            scrollObj.change();//当滚动条内容改造后,要求刷新滚动条的来得,则调用本办法
                //            scrollObj.roll(value);//把滚动条定位到某一点上,value为相对于滚动条对象的比例
            };
        </script>
    </head>
    <body>
        <div id="obj">
            <div>
                当前,公司管理世界刮起一股新的“前卫风”,一些大亨公司纷繁为友好“消肉”,向更精晓和敏感的事情转型。据理解,行草软件正越来越多地把客商的第一保险开支向咨询顾问和第三方经销商转移。
                “在中国故里,九成的宋体公司专门的学问是通过这么些同盟同伙开展的。其余,为了进一步保障草书的收入,总COO埃里森还购销了夏威夷的三个小岛。” Craig Guarente说道。
                作为全世界副组长,Guarente极其清楚楷体的各个战略。Guarente具备16年的干活经验,曾经在协议管理、软件许可证管理、软件审计方面有加上经验。二〇一一年离开宋体后,插足了Palisade公司,该商厦的着重工作是赞助陶文客户提供软件承包、审计参预和许可证“优化”等专业。
                Guarente代表,Palisade企务发展极高效。作为第三方单位,Palisade补助客商获得了名著订单,因为他们更接近商城,能更标准地知道客户需求。
                一般的话,咨询公司是协助顾客梳理他的其实需求及软件本人能提供什么价值。Guarente通超过实际操做了详实演讲。比方“你想建设三个新的数额主导,想要推出八个新的天灾人祸恢复生机安顿,只怕您想进去云端,第三方商城第一会制订一个规划图,最后完成,实现客户最后目的。假如把软件安顿在点不清服务器的例外地方上,集团会有错过软件的场地。因为厂家软件比较少能博得许可证密钥。但Oracle已经造成习贯,每一个或许功能都能够在软件条件下下载。Oracle数据库管理员通过机关负载的存款和储蓄库(AW中华V)报告就能够会诊数据库难题,那是大规模的事,但要求你有一个Oracle数据库包的准予。”
                如今,随着软件审计浪潮的起来,多数商号正在安装软件资产管理工科具来规定他们选拔什么软件,能选取多久,多个公司多少人在用。但盛名处理分析师Hegedus聊到:“未有任何工具能精确领悟集团准则,越发是宋体的制品选取,要求专门的学问的第三方机构来支援用户掌握软件准则。”
                那么怎么技术为宋体的软件应用打补丁呢?陶文化总同盟裁马克•赫德(MarkHurd)下一周表示:在集团应用之初要把第三方机构定义为服务援救方,那样便于企业今后免费获取补丁修复和任何扶助,而不只是买进产品知识产权。其它,公司要有效行使咨询顾问,在精晓集团选用什么软件,公约应该包罗怎么样内容时,帮助基金调控的率先步。不要盲目离开软件中间商,依据本人预测和估量的流程买卖软件。
            </div>
        </div>
    </body>
    </html>

    //向日志窗体中增加一行
     this.writeRaw=function(message){
             //要是初步窗体是不设有的,则转移日志窗体
      if(!logWindow){
        createWindow();
       }
    //创建li的dom节点
      var li=document.createElement('LI');

    上述正是本文的全体内容了,批注的充裕详细,希望我们可以喜欢。

      //对窗体进行css样式调节
      
      li.style.padding='2px';
      li.style.border='0';
      li.style.borderBottom='1px dotted black';
      li.style.margin='0';
      li.style.color='#000';

    你可能感兴趣的稿子:

    • 用javascript完结转移TEXTAREA滚动条和按键的水彩,以及如何让滚动条变得扁平
    • JavaScript贯彻滚动栏功能的方法
    • javascript html5兑现仿flash滚动播放图片的办法
    • JavaScript调控网页平滑滚动到钦点成分地点的章程
    • javascript贯彻左右说了算无缝滚动
    • Javascript 实现图片无缝滚动
    • 回来最上端按键响应滚动且动态展现与遮掩
    • jquery左右轮转宗旨图banner图片鼠标经过呈现上下页开关
    • 依据jquery完毕点击左右按键图片横向滚动
    • js完结带按键的上下滚动作效果应

      //  验证message信息
      if(typeof message == 'undefined'){

              //在li里面添Gavin本节点。
        li.appendChild(
         document.createTextNode('Message is undefined')   
         );
       }else if(typeof li.innerHTML!=undefined){
            //那是另一种艺术的公布
         li.innerHTML=message;
        }else{
          li.appendChild(
           document.createTextNode(message)   
          );
         }
        logWindow.appendChild(li);
        return true;
      };
    }
    //对象字面量的艺术宣示特权方法
    //向日志窗体中增多一行,向输入的故事情节开展简缺点理
    myLogger.prototype={
     
     write:function(message){
      if(typeof message=='string' && message.length==0 ){
              return this.writeRaw('未有输入音讯');
       
      }
      if(typeof message !='string'){
        if(message.toString){
         return this.writeRaw(message.toString());
        }else{
         return this.writeRaw(typeof message);
        }
       }
    //将当先号小于号进行正则转变到HTML标志
      message=message.replace(/</g,"<").replace(/>/g,">");
      return this.writeRaw(message);
     },
     header:function(message){
      message='<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">' message '</span>';
    新葡亰496net,  return this.writeRaw(message);
      }
    };
    window['LD']['log'] = new myLogger();LD.js[javascript] view plaincopyprint?// JavaScript Document  
    if(document.all && !document.getElementById){ 
        document.getElementById=function(id){ 
            return document.all[id]; 
            } 
        } 
     
    if(!String.repeat){ 
            String.prototype.repeat=function(l){ 
                return new Array(l 1).join(this); 
                } 
        } 
     
    if(!String.trim){ 
            String.prototype.trim=function(){ 
                    return this.replace(/^s | $/g,''); 
                }  
        } 
     
    (function(){ 
        //构造命名空间  
        window['LD']={} ;   
         
        function $(){ 
            var elements=new Array(); 
            //arguments当前函数的参数数组。参数  
            for(var i=0;i<arguments.length;i ){ 
                    var element=arguments[i]; 
                     
                    if(typeof element=='string'){ 
                            element=document.getElementById(element); 
                        } 
                    if(arguments.length==1){ 
                        return element; 
                        } 
                    elements.push(element); 
            } 
            return elements; 
        } 
        //注册命名空间  
        window['LD']['$']=$; 
         
        function getElementsByClassName(className,tag){ 
                parent=parent || document; 
                if(!(parent=$(parent))) return false; 
                 
                 
                //var allTags=document.getElementsByTagName(tag);  
                //对tag进行过滤,把tag的对象全抽出来  
                var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag); 
                var matchingElements=new Array(); 
                 
                className=className.replace(/-/g,"\-"); 
                var regex=new  RegExp("(^|\s)" className "(\s|$)"); 
                 
                var element; 
                for(var i=0;i<allTags.length;i ){ 
                        element=allTags[i]; 
                        if(regex.test(element.className)){ 
                                matchingElements.push(element); 
                            } 
                    } 
                     
                    //重返那一个数组  
                return matchingElements; 
            } 
            window['LD']['getElementsByClassName']=getElementsByClassName; 
             
            function bindFunction(ojb,func){ 
                    return function(){ 
                            func.apply(obj,arguments); 
                        } 
                }; 
            window['LD']['bindFunction']=bindFunction; 
             
        function getBrowserWindowSize(){ 
                var de=document.documentElement; 
                return{ 
                        'width':( 
                            window.innerWidth 
                            || (de && de.clientWidth) 
                            || document.body.clientWidth), 
                        'heigth':( 
                            window.innerHeight 
                            || (de && de.clientHeight) 
                            || de && document.body.clientHeight) 
                    } 
            }; 
            //注册能力件  
        window['LD']['getBrowserWindowSize']=getBrowserWindowSize; 
         
         
        function addEvent(node,type,listener){ 
                if(!(node=$(node))) return false; 
                 
                if(node.addEventListener){ 
                    node.addEventListener(type,listener,false); 
                    return true; 
                   }else if(node.attachEvent){ 
                        node['e' type listener]=listener; 
                        node[type listener]=function(){node['e' type listener](window.event);} 
                        node.attachEvent('on' type, node[type listener]); 
                        return true; 
                       } 
                   return false; 
            }; 
            //注册本事件  
        window['LD']['addEvent']=addEvent; 
         
    })(); 
    // JavaScript Document
    if(document.all && !document.getElementById){
     document.getElementById=function(id){
      return document.all[id];
      }
     }

    if(!String.repeat){
      String.prototype.repeat=function(l){
       return new Array(l 1).join(this);
       }
     }

    if(!String.trim){
      String.prototype.trim=function(){
        return this.replace(/^s | $/g,'');
       }
     }

    (function(){
     //构造命名空间
     window['LD']={} ; 
     
     function $(){
      var elements=new Array();
      //arguments当前函数的参数数组。参数
      for(var i=0;i<arguments.length;i ){
        var element=arguments[i];
        
        if(typeof element=='string'){
          element=document.getElementById(element);
         }
        if(arguments.length==1){
         return element;
         }
        elements.push(element);
      }
      return elements;
     }
     //注册命名空间
     window['LD']['$']=$;
     
     function getElementsByClassName(className,tag){
       parent=parent || document;
       if(!(parent=$(parent))) return false;
       
       
       //var allTags=document.getElementsByTagName(tag);
       //对tag进行过滤,把tag的指标全抽取来
       var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
       var matchingElements=new Array();
       
       className=className.replace(/-/g,"\-");
       var regex=new  RegExp("(^|\s)" className "(\s|$)");
       
       var element;
       for(var i=0;i<allTags.length;i ){
         element=allTags[i];
         if(regex.test(element.className)){
           matchingElements.push(element);
          }
        }
        
        //重回这些数组
       return matchingElements;
      }
      window['LD']['getElementsByClassName']=getElementsByClassName;
      
      function bindFunction(ojb,func){
        return function(){
          func.apply(obj,arguments);
         }
       };
      window['LD']['bindFunction']=bindFunction;
      
     function getBrowserWindowSize(){
       var de=document.documentElement;
       return{
         'width':(
          window.innerWidth
          || (de && de.clientWidth)
          || document.body.clientWidth),
         'heigth':(
          window.innerHeight
          || (de && de.clientHeight)
          || de && document.body.clientHeight)
        }
      };
      //注册技能件
     window['LD']['getBrowserWindowSize']=getBrowserWindowSize;
     
     
     function addEvent(node,type,listener){
       if(!(node=$(node))) return false;
       
       if(node.addEventListener){
           node.addEventListener(type,listener,false);
        return true;
          }else if(node.attachEvent){
            node['e' type listener]=listener;
         node[type listener]=function(){node['e' type listener](window.event);}
         node.attachEvent('on' type, node[type listener]);
         return true;
           }
          return false;
      };
      //注册技巧件
     window['LD']['addEvent']=addEvent;
     
    })();运营结果:

     

    新葡亰496net 6

    总结

            那些小例子,基本上把在此以前所学内容,包罗基础支撑、面向对象、原型、对象字面量、this、成效域链等知识点全体席卷,算是对JavaScript学习的七个总括。学的越来越多,越要找到所学内容之间的联络,学习JS,不只是仅仅学习JS,更要联络在此之前所学的面向对象、C#、CSS等知识,让知识像路一样通行无阻,手艺“书越读越薄”。今后能做的,就是一连构建笔者的知识网。

     作者:lidaasky  

    myLog.js:重要职能是创设myLogger构造...

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:自动隐藏的Sticky的Header,JavaScript日

    关键词:

上一篇:本人的前端学习进程,学习进程

下一篇:没有了