摘要：
ie各个方面都有自己独特的方法，它为DOM中某些部分提供了readystatechange事件。支持readystatechange事件的对象都有readystate属性。readystate共有以下几个值：uninitialized： 对象存在但未初始化；loading：对象正在加载；loaded：对象数据加载完毕；interactive：可以操作对象了，但还没加载完毕；complete：加载完毕。注意上面5个值并不一定每个事件都全包含，并且不一定是什么顺序。下面讲到的加载会用到上面的内容。1.document加载众所周知 window.onload是等待所有资源加载完毕（包括图像）。想要实 阅读全文
随笔档案-2012年02月
javascript设计模式小记
2012-02-18 08:31 by 边缘er, 1250 阅读, 收藏, 编辑
摘要：
一、单体模式用于保存一组属性或方法（简单的可以是一个对象字面量），如果可实例化，只能被实例化1次（即return）。(function(){ ... return { .... }})()可用来划分划分命名空间，封装私有属性和方法（return出来的是公用接口）；可实现惰性加载（再一步封装，在使用时才实例化）；还可以实现分支技术。二、工厂模式在一个方法中，需要用到几个类的实例，而这些类都实现了相同的接口（可能派生自一个类），所以可以互换使用。把创建这些类的实例的代码单拿出来放在一个地方（可以是一个单体或一个新建的类中等），这个地方就是工厂。工厂可以弱化对象之间的耦... 阅读全文
静态iframe异步加载
2012-02-18 08:22 by 边缘er, 1109 阅读, 收藏, 编辑
摘要：
tab选项卡中内容过多时候用到的iframe。<ul id="nav_ul"> <li>第一个iframe</li> <li>第二个iframe</li> <li>第三个iframe</li></ul><div class="iframe_cont"></div><div class="iframe_cont"></div><div class="iframe_cont&quo 阅读全文
placeholder
2012-02-18 08:18 by 边缘er, 483 阅读, 收藏, 编辑
摘要：
html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。(function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function Placeholder(obj){ ... 阅读全文
js上一张图片下一张图片
2012-02-18 08:15 by 边缘er, 1531 阅读, 收藏, 编辑
摘要：
实现效果：鼠标经过左半部分，显示左按钮，点击显示上一张图；鼠标经过右半部分，显示右按钮，点击显示下一张图。有淡入淡出效果。js代码：function picNext(id){ var picBox = document.getElementById(id), picArray = picBox.getElementsByTagName('img'), len = picArray.length, boxWidth = picBox.offsetWidth; picArray[0].style.display = 'block'; //... 阅读全文
js轮播广告
2012-02-18 08:12 by 边缘er, 397 阅读, 收藏, 编辑
摘要：
淡入淡出js轮播广告，写法类似自动播放的tab选项卡，加入了淡入淡出效果。js代码：function lunbo(contClass, numArr, normalClass, hoverClass){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; ... 阅读全文
渐隐渐现fade js
2012-02-18 08:09 by 边缘er, 337 阅读, 收藏, 编辑
摘要：
function fadeIn(el){ el.style.opacity = 0; el.style.filter = 'alpha(opacity = 0)'; el.style.display = 'block'; var n = 0; function fadeShow(){ if (n < 1){ n += 0.1; el.style.opacity = n; el.style.filter = 'alpha(opacity = '+n*100+')'; ... 阅读全文
左右按钮-自动滚动
2012-02-18 08:05 by 边缘er, 309 阅读, 收藏, 编辑
摘要：
js代码：function lrAuto(overHide, leftBtn, rightBtn, num){ //获取前3个参数 var doc = document, overHide = doc.getElementById(overHide), leftBtn = doc.getElementById(leftBtn), rightBtn = doc.getElementById(rightBtn); //判断内容太少不需要滚动和按钮 var scrollUl = overHide.getElementsByTag... 阅读全文
撕拉广告
2012-02-17 21:58 by 边缘er, 247 阅读, 收藏, 编辑
摘要：
js代码var sila = (function(){ return { silaCss : 'position:absolute; top:0; right:0; overflow:hidden', closeCss :'position:absolute; width:20px; heigth:20px; bottom:0; left:0; overflow:hidden', smallSize : 80, smallPic : 'images/small.jpg', bigSize : 300, b... 阅读全文
静态分页
2012-02-17 21:56 by 边缘er, 221 阅读, 收藏, 编辑
摘要：
html<div id="page_box"> <ul class="list_ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10< 阅读全文
分享到...插件
2012-02-17 21:53 by 边缘er, 711 阅读, 收藏, 编辑
摘要：
可实现行内和侧边2种方式。var wmShare = (function(){ return { //初始值 skin : 'slide_black', url : encodeURIComponent(top.location.href), title : encodeURIComponent(top.document.title), pic : '', //获取参数方法 getParameter : function(){ var scripts = documen... 阅读全文
html5离线
2012-02-17 21:47 by 边缘er, 377 阅读, 收藏, 编辑
摘要：
要构建离线应用程序，需要一个以manifest为后缀名的离线清单，清单中包括3类内容，1.CACHE：需要缓存的文件2.NETWORK：不需要缓存的文件3.FALLBACK：包括2个文件，第一个是能在线访问的资源，第二个是如果第一个访问不了的备用资源list.manifest文件示例CACHE MANIFEST#注释以#开头，清单必须以CACHE MANIFEST开头CACHE#下面是需要缓存的文件test.jstest.csstest.jpgNETWORK#以下是不需缓存的文件over.htmlabout.htmlFALLBACK#加入1.js读取不到就用2.js1.js 2.js使用离线清 阅读全文
html5 web Storage
2012-02-17 21:46 by 边缘er, 271 阅读, 收藏, 编辑
摘要：
web Storage本地存储是对cookies机制的改善。Storage分为sessionStorage和localStorage（都是window的属性）。前者在窗口之间可以共享存储数据（会话），如果关闭浏览器，数据就没了；后者即使关了浏览器再打开依然可以读到数据（需是同一个浏览器）。二者的用法一样。简单示例首页<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html5 webStorage</title></head> 阅读全文
html5 workers线程
2012-02-17 21:42 by 边缘er, 314 阅读, 收藏, 编辑
摘要：
html5之前，javascript脚本都是在单线程中执行的，也就是说如果js运行时间过长，除了等待什么也干不了，甚至卡死。创建一个worker后台线程，这样就不影响前台的渲染了。简单演示主页面<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html5 workers</title></head><body><span id="span1">5</span><di 阅读全文
html5 webSockets实时通信
2012-02-17 21:39 by 边缘er, 386 阅读, 收藏, 编辑
摘要：
webSockets是html5提供的客户端和服务器端通信机制，优点是一旦连接建立成功，它就是双向的、实时的、永久的（除非被显式的关闭）。建立连接var w = new WebSockets('ws://bianyuan.me');建立一个WebSockets连接实例即可，注意url必须以ws或wss（加密通信）开头。这样就可以和服务器端进行通信了，当然前提是服务器端支持WebSockets并已配备好。websockets3个监听事件//打开事件w.onopen = function(){alert('连接已打开')}//接收数据通信事件w.onmessage 阅读全文
html5 geolocation地理位置
2012-02-17 21:36 by 边缘er, 323 阅读, 收藏, 编辑
摘要：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html5 geolocation</title><link href="css/html5.css" rel="stylesheet" type="text/css"></head><body><span id="support">请将下面的经纬度输入谷歌地图： 阅读全文
html5 message和postMessage跨域
2012-02-17 21:34 by 边缘er, 556 阅读, 收藏, 编辑
摘要：
设计背景：父页面和子页面(iframe)不同域，进行跨域操作。实现功能：父页面可以改变子页面的"状态"内容，子页面可以改变父页面的title。父页面代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>postMessage演示</title></head><body><p><b>父页面源</b>: event51</p><input type 阅读全文
锁屏-lightbox效果
2012-02-17 21:30 by 边缘er, 305 阅读, 收藏, 编辑
摘要：
锁屏就是弹出半透明的遮罩层，把整个页面遮住不能操作，然后上边有一个可操作窗口，类似lightbox效果。<span onclick="lightbox.lockScreen('white')">锁屏并弹出层</span><span onclick="lightbox.openScreen('white')">关闭弹出层并解锁</span>说明：lightbox.lockScreen和lightbox.openScreen分别是锁屏和解锁方法，“white”是要弹出层的id，样 阅读全文
本地搭建PHP环境
2012-02-17 21:20 by 边缘er, 434 阅读, 收藏, 编辑
摘要：
一、安装网站服务器下载安装apache下载apache（httpd-2.2.17-win32-x86-openssl-0.9.8o.msi随官网更新http://httpd.apache.org/download.cgi）并安装，安装过程中会输入域名，如果本机安装输入localhost。安装完毕后运行http://localhost，能正常打开说明安装成功。修改默认目录文件默认目录在\apache\htdocs，如要修改，打开apache的httpd.conf，修改两个位置documentRoot，和Directory，改成自己的目录。二、安装php下载安装下载php-5.2.9-Win32. 阅读全文
ajax的使用原理
2012-02-17 21:11 by 边缘er, 267 阅读, 收藏, 编辑
摘要：
XMLHttpRequest对象ajax的核心对象是XMLHttpRequest，首先创建一个跨浏览器的xhr方法，function createXHR(){ var xhr; try{ xhr = new XMLHttpRequest(); }catch(MS){ try{ xhr = new ActiveXObject('Msxml2.XMLHTTP'); }catch(MS){ try{ xhr = new ActiveXObject('Microsoft... 阅读全文
固定在屏幕底部的层
2012-02-17 21:05 by 边缘er, 407 阅读, 收藏, 编辑
摘要：
css中position:fixed;是就用来固定的，但IE6不支持，下面方法是在同事那拿来的，还挺好用。因为用到hack和expression，body,div{ margin:0; padding:0; color:#333;}.main{ width:960px; height:1000px; margin:0 auto; padding-top:300px; text-align:center;}.fixbar{position:fixed; width:100%; height:23px;padding-top:8px;bottom:0;left:0;border-top:4px s 阅读全文
jq三级导航菜单--可修改为二级、四级等导航菜单
2012-02-17 21:00 by 边缘er, 1071 阅读, 收藏, 编辑
摘要：
此导航菜单为三级导航菜单，可以通过简单的修改变换成二级或四级导航菜单使用。虽然没有无限级导航那么智能，3级导航已经够用，导航太深的话，对用户体验不好。此代码参考自《JQ攻略》，原书代码的样式虽略有问题（这里已修改），但代码相当简洁清晰，值得借鉴。body,ul,li{ margin:0; padding:0;}a{ text-decoration:none; color:#000;}ul{ list-style:none;}.nav_ul{ height:30px; margin:50px 0 0 50px;}.nav_ul li{ float:left; background-color:# 阅读全文
html5中的video和audio
2012-02-17 20:55 by 边缘er, 965 阅读, 收藏, 编辑
摘要：
html5中的video和audio最大的优点就是不需要第三方插件，可以直接插入，并且用同一的API接口控制；目前缺点就是不支持流播放和播放媒体类型不统一。<video src="test1.mp4" controls>如果浏览器不支持，备用代码写在这里，比如可用flash插入视频或是提示</video><audio src="test2.mp3" controls>同上</audio>如果浏览器不支持，备用代码写在这里，比如可用flash插入视频或是提示如果使用了controls属性，就是使用默认的播放控 阅读全文
html5强大的表单
2012-02-17 20:53 by 边缘er, 647 阅读, 收藏, 编辑
摘要：
html5表单无论多么强大，都不能依赖它自身的验证，服务器的验证是不可少的。html5表单的验证能更快的把结果反映给用户，增强用户体验。input新增的type类型tel,email,url,search,range,number,color,datetime,datetime-local,time,date,week,month。这些type类型的含义一看就明白，目前opera浏览器是支持最好。如果输入的值不符合相应类型，就会报错。新增属性1.required：此项为必填项。2.placeholder：默认显示的描述或提示信息，比如placeholder="请输入账号"， 阅读全文
初识html5
2012-02-17 20:50 by 边缘er, 189 阅读, 收藏, 编辑
摘要：
变简洁了DOCTYPE声明声明没有那么长了，只需<!doctype html>即可。charset编码拿utf-8编码来说，<meta charset="utf8">。有没有引号无所谓，大小写无所谓（html本身就很松散，不像xml，但最好养成良好的习惯）。html、head、body这3个标签是可选的，浏览器会自动生成，为了可维护行，最好写上。部分新增标签header：页眉，用于整个页面或某区块footer：页脚，同上section：一部分一个块（有点像DIV）article：自构成的一部分，可以复用或聚合。如一篇博客，一个故事，一个教程等asid 阅读全文
对联--随滚动条滚动的层（多重判断）
2012-02-17 20:46 by 边缘er, 337 阅读, 收藏, 编辑
摘要：
一个悬浮的层，随屏滚动；可选左右两边（运行2次即可做对联）；可选在最左边或最后边，也可以紧贴页面内容左右（如果页面内容宽度1002，而显示器分辨率为1900，可使悬浮广告紧贴1002内容）；可设置头和底高度，无论如何滚动也不会盖住头底。js代码function scrollBar(scrollId, o){ //获取滚动条高度 function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } e... 阅读全文
tab选项卡-可自动播放
2012-02-17 20:36 by 边缘er, 681 阅读, 收藏, 编辑
摘要：
效果如图，此代码设计是考虑到tab标签不是文字+背景的模式，默认效果和当前效果都是图片。也就是每个tab标签需要2个样式情况。如果项目只需要文字+背景图的tab标签，可以样式合并，或者略微改下js去掉+(n+1)。js代码function tab(classArr, normalClass, hoverClass, contClass, auto){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) ... 阅读全文
鼠标跟随效果
2012-02-17 20:33 by 边缘er, 273 阅读, 收藏, 编辑
摘要：
实现效果：鼠标经过显示tip层，并且tip层随鼠标移动，鼠标移出隐藏tip层。先获取事件对象，然后通过把事件对象的clientX和clientY赋值给div的left和top。需要注意的是，这个跟随div是要绝对定位的，并且不要嵌套在内容层中。js代码：function follow(cont, tip){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = docum... 阅读全文
伸缩导航-竖向可收缩、展开的导航
2012-02-17 20:27 by 边缘er, 613 阅读, 收藏, 编辑
摘要：
实现效果：第一次点击展开，再点击收起。js代码：function contract(closeClass, openClass, contBox){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getEl... 阅读全文
鼠标经过显示层，移出隐藏层
2012-02-17 20:19 by 边缘er, 2369 阅读, 收藏, 编辑
摘要：
鼠标经过显示层，鼠标移出后隐藏层，这种情况是非常常见的。假如有2个层：一个是内容层cont（默认显示），一个是提示层tip（默认隐藏）。当鼠标经过cont的时候tip显示，但当鼠标进入tip的时候（这时候鼠标已经移出cont），还要保证tip是显示。然后鼠标移出tip或移出cont（没有进入tip）的时候，tip层隐藏。js代码function tip(overClass, tipClass){ function getEvent(event){//获取事件对象 return event ? event : window.event; } function ge... 阅读全文
浏览器可视区域、页面实际宽度、高度
2012-02-17 18:04 by 边缘er, 4095 阅读, 收藏, 编辑
摘要：
测试浏览器傲游2（ie6内核）、火狐4、google8.0（分标率1280）一、浏览器可视区域-宽和高可视区域就是不包括上下左右的工具栏、状态栏（滚动条特殊）。代码：var pageWidth = document.documentElement.clientWidth,pageHeight = document.documentElement.clientHeight;可视宽：ie中竖向滚动条影响pageWidth的值。就拿1280分辨率（窗口最大化情况）来举例，ie浏览器下pageWidth的值是1261（减去了滚动条的宽），而火狐和谷歌浏览器下pageWidth是1280。ie默认是有滚 阅读全文
a标签深入研究
2012-02-17 18:02 by 边缘er, 260 阅读, 收藏, 编辑
摘要：
1.普通a标签，这个没什么好说的，是行内元素，即使加了宽和高也不会占相应的面积。2.给普通的a标签加上display:block或者float属性，a标签就以块元素显示了，占有相应的面积（这里有宽高），这是比较常用。3.给普通的a加上position:absolute定位。出现诡异的情况：没有背景的时候ie6 7下a标签没有占相应的面积；有背景的情况下，a标签都占有相应的面积。4.还说position:absolute的a标签。和第3种情况对比，我们不放背景，给这个绝对定位的a一个同级元素或父元素（高度需要撑开到大于a标签的高度）。小结：针对第3、4种情况，得出以下结论：a标签position 阅读全文
事件委托
2012-02-17 17:58 by 边缘er, 224 阅读, 收藏, 编辑
摘要：
用事件委托写方法在很多时候会提高性能。比如有个ul中有3个li，点击不同的li调用不同的方法，这就可以通过"事件冒泡"（关于事件冒泡）来构建事件委托了。说简单点，就是只写一个方法在ul上，li则冒泡到ul,通过判断不同的事件目标对象（真正点击的是li，也就是目标），执行不同的操作。<ul id="weituo"> <li id="li1">第一个li</li> <li id="li2">第二个li</li> <li id="li3" 阅读全文
css文字竖排
2012-02-17 17:48 by 边缘er, 420 阅读, 收藏, 编辑
摘要：
语法：writing-mode : lr-tb、tb-rl<br />参数：lr-tb：从左向右，从上往下 tb-rl：从上往下，从右向左 但除了ie，其他浏览器基本不支持，我们可以用其他方法模拟一下，<style>ul{ width:100px; height:80px; overflow:hidden; list-style:none;}ul li{ float:right; display:inline; margin-left:4px; width:14px; height:100px; font-size:14px; word-wrap:break-word; 阅读全文
垂直居中
2012-02-17 17:47 by 边缘er, 412 阅读, 收藏, 编辑
摘要：
1、假如让一个一直宽高的div相对浏览器可视区水平和垂直都居中，实现起来很简单：div{position:absolute;width:400px;height:300px;top:50%;left:50%;margin:-150px 0 0 -200px;border:1px solid #ff0000;}2、如果是左右两列布局，左侧就一标题需要垂直居中，右列的内容高度不固定。可以使用table布局；如果不用table可以借鉴上边的方法实现垂直居中，<style type="text/css">body,div,h2{ margin:0; padding:0; 阅读全文
纯CSS实现tab选项卡
2012-02-17 17:42 by 边缘er, 658 阅读, 收藏, 编辑
摘要：
这个是通过锚点实现的，纯属自己写着玩，一般用不上...<style type="text/css">body,div,ul,li{margin:0; padding:0; font-size:12px;}.tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; background:url(/uploads/allimg/100309/1_100309143554_1.gif) left bottom repeat-x #FCEDFF;border:1px solid #D 阅读全文
等高DIV
2012-02-17 17:27 by 边缘er, 229 阅读, 收藏, 编辑
摘要：
1、利用边距（margin）和补白（padding）实现div等高<style type="text/css">body,div,p{margin:0;padding:0;}#wrap{overflow:hidden;width:1000px;margin:0 auto;}#left,#center,#right{margin-bottom:-10000px;padding-bottom:10000px;}#left{float:left;width:250px;background:#00FFFF;}#center{float:left;width:500px 阅读全文
滑动门-圆角背景宽度和高度自适应
2012-02-17 17:16 by 边缘er, 582 阅读, 收藏, 编辑
摘要：
第一张图用于高度自适应，第二张用于宽度自适应。如果觉得不够高或宽，可以修改图片。实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）嵌套一个h2（用短背景居顶铺）标签。圆角背景高度自适应：<style type="text/css">body,div,p,h2{ margin:0; padding:0;}div{width:262px; margin:100px auto 0; background:url(images/hua1.png) right bottom no-repeat; ov 阅读全文
浅谈css
2012-02-17 17:01 by 边缘er, 345 阅读, 收藏, 编辑
摘要：
要学好CSS，首先要做好必要的准备，现在网页基本语言的主流是XHTML，XHTML是过渡语言，相对HTML来说更加严格，我建议先学好HTML标签，那么XHTML只要注意严格的问题就可以了。在这里我要给那些即将做CSS和已经在做CSS工作的朋友一点真诚的建议。很多招聘网页制作都会要求CSS+DIV，一些切图的也这么说，因为我是中国人，所以我也这么说....其实CSS+DIV这个说法只有中国才有，因为 WEB2.0标准里有CSS 2.0，却没有DIV。现在网页的布局大多都抛弃了表格而选择DIV，因而也产生了滥用DIV的局面，放眼望去，满屏DIV。选择CSS，并不是放弃 TABLE，TABLE是显示 阅读全文
