北风网149 javaScript

95*****************************************************************************

[JavaScript]149个有代码\95.[JavaScript]第34章.项目1-博客前端：封装库--弹出登录框[6]—600帧。

1.提出问题：随着浏览器的大小变化，右上角的按钮会“错位”。

讲解方法：在该按钮上一级设置相对点，下一级设计为0.

2. ..index.html文件中写完标签后，就要在index.css写#标签名。

3.CSS中：

border边框。

padding 内边距(英文：垫补)。占据的空白地方是在边框里面。

margin 外边距。占据的空白地方会是在边框外面。例：margin:0; //DIV的上；右；下；左4个方向的外边距均为0

4. CSS中：

background: url(images/login_header.png) repeat-x 0 -50px”就是Y坐标为负的50像素横向平

铺。

5. js中： 点击登录按钮，就会显示登陆框。

$().getClass('login').click( function () {

$().getId('login').css('display','block');

} );

6. 库函数 base.js中

//随着浏览器大小变化，设置物体居中

Base.prototype.center = function (width,height) { // width原物体宽, height原物体高

vartop = (document.documentElement.clientHeight - 250) / 2;

varleft = (document.documentElement.clientWidth - 350) / 2;

for(var i = 0; i < this.elements.length; i ++) {

this.elements[i].style.top= top + 'px';

this.elements[i].style.left= left + 'px';

}

returnthis;

}

index.js中 以下：350原物体宽。250原物体高

$().getId('login').center(350,250).resize( function () {

$().getId('login').center(350,250) ;

});



















99*****************************************************************************

[JavaScript]_149个有代码\99.[JavaScript]第34章.项目1-博客前端：封装库--事件绑定[上][10]

一。现代绑定中W3C 使用的是addEventListener 和removeEventListener。

IE 使用的是attachEvent和detachEvent。



1.//跨浏览器事件绑定

tool.js中定义

function addEvent( obj,
type, fn) {

if (typeofobj.addEventListener != 'undefined') { //!= 'undefined'说明支持---W3C

obj.addEventListener(type, fn,false); //false代表w3c不需要捕获

} else if (typeof obj.attachEvent !='undefined') {

obj.attachEvent ( 'on' + type, function() { //attachEvent参数要加on-- IE

fn.call(obj, window.event); //使用call 来冒充对象obj

} ) ;

}



} 无分号

demo.js中调用window.onload=
function ( ) { alert('1'); } ; 有分号



2、//跨浏览器删除事件

tool.js中定义

function removeEvent(obj, type, fn) {

if(typeof obj.removeEventListener != 'undefined') {

obj.removeEventListener(type,fn, false);

}else if (typeof obj.detachEvent != 'undefined') {

obj.detachEvent('on'+ type, fn);

}

}



demo.js中调用

window.onload = function () {

varoButton = document.getElementById('button');

addEvent(oButton,'click', fn);

removeEvent(oButton,'click', fn);

} ;



3.