自动隐蔽的Sticky的Header,w3cplus学习笔记

自动隐讳的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日志操作对象的实例,大家须要的是那多少个文件:

电动隐蔽导航条

「自动隐蔽」意味着当顾客在往下滚动页面时导航条将会消退,但当客户有望需求导航条的时候又能让它现身:顾客已经滚动到页面尾部,或然最早进步滚动时。导航条的藏身至稀少三种样式:人机联作式和轻易式。

鼠标滚轴事件,思考到宽容性:

序言: (写在文前的片文只字、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------JasonZhang
web开荒已现世多年,本事成熟且学习平台湾大学范围,作者针对内部细节从精气神儿上进展解释.力求透顶.

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

交互式

人机联作式录制演示

人机联作式的意趣是,导航条会直接地,大概立即响应页面滚动事件,这种方式恐怕会出于它操作起来的痛感,从客商体验看来是三个了不起的小细节。然而它也是有倒霉的单向:这种样式的实质决定了他必定要正视于JavaScript,我们无法运用JS事件节流阀(在钦赐的时间周期内只调用某些函数叁次卡塔 尔(英语:State of Qatar)。基本上那就代表每回滚动事件爆发都要发生总括,並且会毫无意义的占用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收取对象。

简单式

轻便式摄像演示

这种情势,决计于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';

}

}

};

图片 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);

}

});

};

-

图片 2

滚轴事件案例

先是定义一个id为lanren的div.
<pre>
<div id="lanren"></div>
</pre>
第二css也极其轻便,自定义叁个动漫,详细情况请继续向下看∨

以下是逐个文件代码:

有关小编:吴鹏煜

图片 3

开诚布公、勇气、创新意识和传说。(今日头条今日头条:@Nappp卡塔 尔(英语:State of Qatar) 个人主页 · 作者的稿子 · 13

图片 4

打包案例--改造背景颜色

图片 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

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');

 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);
  }
});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里面增多文本节点。  
                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

//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();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;
 
})();运转结果:

 

图片 6

总结

        那些小例子,基本上把早先所学内容,满含底子支撑、面向对象、原型、对象字面量、this、效用域链等知识点全体蕴含,算是对JavaScript学习的多少个总计。学的越来越多,越要找到所学内容之间的联络,学习JS,不只是后生可畏味学习JS,更要挂钩从前所学的面向对象、C#、CSS等知识,让文化像路相像出入无间,本事“书越读越薄”。现在能做的,就是三回九转塑造作者的知识网。

 作者:lidaasky  

myLog.js:重要功用是营造myLogger构造...

本文由星彩网app下载发布于前端技术,转载请注明出处:自动隐蔽的Sticky的Header,w3cplus学习笔记

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。