lmh2072005

浏览: 111378 次
性别:
来自: 深圳

最近访客更多访客>>

Hmily25

luyueyue

lalalalalsa

CvShrimp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

更新下前端相关笔记

博客分类：

js
html5
css
ajax

笔记

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

*color:red; /* IE6、IE7支持 */

+color:red;/*IE7支持*/

*+color:red; /* IE7支持 */

color:red\9; /* IE6、IE7、IE8支持 */

color:red\0; /* IE8、IE9支持 */

color:red\9\0; /*IE9 支持*/

/* webkit and opera */

@media all and (min-width: 0px){ div{padding:11px;} }

/* webkit */

@media screen and (-webkit-min-device-pixel-ratio:0){ div{padding:11px;} }

/* opera */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { div{padding:11px;} }

/* firefox * /

@-moz-document url-prefix(){ div{background-color:#cc0000;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {background-color:#66ff00;} /* newest firefox */

}

*html .xxx{

color:red;

}//IE6

*+html .xxx{

color:red;

}//IE7

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

<html>

<!–[if IE 7]> = 等于 IE7

<!–[if lt IE 8]> = 小于 IE8（就是 IE7 或以下了啦）

<!–[if gte IE 8]> = 大于或等于 IE8

把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了

内联元素都支持：

display:inline-block;

块级元素IE6/7不支持此时用display:inline;zoom:1;来代替；

清除浮动：

.c{

zoom:1;

}

.c:after{

clear:both;

display:block;

height:0;

content:".";

visibility:hidden;

}

ie6下面有时候列表图标要鼠标点击或移动过去才显示；

给li列表加zoom:1或position:relative;

window.parent 是iframe页面调用父页面对象

javascript 刷新父窗口

window.opener.document.location.reload();

使用DD_belatedPNG解决IE6下PNG半透明问题,只需要一个理由,就是它支持backgrond-position与background-repeat.

http://dillerdesign.com/experiment/DD_belatedPNG/#download

使用DD_roundies解决ie圆角问题

http://dillerdesign.com/experiment/DD_roundies/

很好的博客网站主题

wordpress/themeforest

而IE6在这里有一个 bug，它每次都从服务器端读取背景图片，结果就是，若服务器反应较慢hover效果就会出现短暂的空白

随便在页面中哪个位置（head、body或者onload）调用上面提及的脚本，例如：

document.execCommand("BackgroundImageCache", false, true);

</script>

加载flash(swfObject)

adobe提供的脚本

在需要显示flash的地方加入下面脚本，将flash路径改下就ok了。

这个脚本根据不同的浏览器用不同的标签显示flash(如object/embed).

用这个脚本主要是为了解决flash加载时要点击一次才能进行交互

AC_FL_RunContent('codebase','https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','736','height','145','src','images/games_<%=localeString%>','flashvars','lagStr=<%=localeString%>','quality','high','wmode','transparent','pluginspage','https://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/games_<%=localeString%>');

</script>

用slideToggle()时发现

在IE8下margin有时失效，开始以为是jquery问题，后来发现是IE8的bug.

综合几个解决方案：

1.给父DIV加个看不见的边框

2.给父DIV设个:overflow:hidden或overflow:auto

3.把margin去掉换成底色的border,如margin-top:8px 换成border-top:8px solid #xxx;

3.给消失margin的标签加上浮动，比如float:left;

4.在消失margin-top的标签前面加个空的标签如<div></div>，或者用一个空的div将消失margin的标签包裹起来；或者用一个空的div将消失margin标签之前的内容包裹起来。

filter:fliph 内容翻转

filter:gray 内容变灰

http://blog.silentash.com/

http://www.w3school.com.cn/js/js_reference.asp

google jquery 引用：

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

//界面好：

http://www.position-absolute.com/articles/jquery-fade-and-slide-toggle-plugin/

http://www.jxwinter.cn/index.php/archives/tag/ie6

//content

forum

http://www.css-js.com

//question

有A页面通过jquery的dialog和iframe加载B页面而B页面也以同样的方法加载C页面但B页面打开的dialog却限定在了B窗口中

请问如何让C页面所在的dialog跳出B页面？

//move dialog

http://www.cnblogs.com/caixw/archive/2010/08/09/jquery-plugin-dialog.html

offsetHeight clientHeight

http://www.cftea.com/c/751.asp

将 document.body 和 document.documentElement 一起应用，比如：document.documentElement.scrollLeft || document.body.scrollLeft（一般将 document.documentElement 写在前面），类似应用请参见：http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp。

页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。

页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容（不管有没有 DTD），可以使用如下代码：

var scrollTop = window.pageYOffset

|| document.documentElement.scrollTop

|| document.body.scrollTop

|| 0;

http://www.cftea.com 千一网络

http://www.zhangjingwei.com/ 源码分析

http://www.web600.net/html/editor/JavaScript/201008183953.html

http://flyzonemu.javaeye.com/blog/326582

addEvent

http://www.w2blog.net/view/353.html IE6 中 a:hover 的bug

2010=-09-12 Meizu m8

好书下载：

http://ajava.org/book/

good

http://preloaders.net/en/horizontal

loading img

http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html 博客园justinyoung

15 个 JavaScript Web UI 库

http://news.csdn.net/a/20100519/218442.html

常用技术收集

http://banu.blog.163.com/blog/static/2314648201089836588/

IE6 hover span

有相对定位时，a:hover{position:relative;}

a:hover span{ position:absolute;}

http://www.happinesz.cn/archives/991/

IE6 position:fixed/absolute

比较详细的javascript /css /ajax...

http://www.web666.net/dom/cancelBubble.html

浏览器的两种模式quirks mode 和strict mode

http://kino.javaeye.com/blog/241260

w3help:

http://www.w3help.org/zh-cn/

forum:

http://bbs.51cto.com/forum-137-1.html

http://forum.csdn.net/SList/CrossBrowser

drag

http://www.koyoz.com/blog/?action=show&id=80

obj.offset[Width|Height|Top|Left] 　取控件相对于父控的位置

event.offset[X|Y] 取鼠标相对触发事件的控件中的坐标

event.screen[X|Y] 鼠标相对于屏幕坐标

event.client[X|Y] 鼠标相对于网页坐标

obj.scroll[Width|Height|Top|Left]　获取对象滚动的大小

obj.client[Width|Height|Top|Left]　获取对象可见区域的大小

解释一下event.X和event.clientX有什么区别？

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标

event.X也一样

但是如果设置事件对象的定位属性值为relative

event.clientX不变

而event.X返回事件对象的相对于本体的坐标

event对象详解 ICOOE 2000.3.31 http://www.51js.com/

event代表事件的状态，例如事件发生的的元素、鼠标的位置等等，event对象只在事件过程中才有效。

event属性：

altKey

检索ALT键的当前状态

可能的值 true为关闭

false为不关闭

button

检索按下的鼠标键

可能的值： 0 没按键

1 按左键

2 按右键

3 按左右键

4 按中间键

5 按左键和中间键

6 按右键和中间键

7 按所有的键

cancelBubble

设置或检索当前事件是否将事件句柄起泡

可能的值： false 启用起泡

true 取消该事件起泡

clientX

检索与窗口客户区域有关的鼠标光标的X坐标，属性为只读，没有默认值。

clientY

检索与窗口客户区域有关的鼠标光标的Y坐标，属性为只读，没有默认值。

ctrlKey

ctrlKey 检索CTRL键的当前状态

可能的值 true为关闭

false为不关闭

dataFld

检索被oncellchange事伯影响的列

aTransfer

为拖放操作提供预先定义的剪贴板式。

Element

检索在on mouseover和on mouseout事件期间退出的对象指针

keyCode

设置或检索与引发事件的关键字相关联的Unicode关键字代码

该属性与onkeydown onkeyup onkeypress一起使用

如果没有引发事件的关键字，则该值为0

offsetX

检索与触发事件的对象相关的鼠标位置的水平坐标

offsetY

检索与触发事件的对象相关的鼠标位置的垂直坐标

propertyName

检索在对象上己更改的特性的名称

reason

检索数据源对象数据传输的结果

可能的值：

0 数据传输成功

1 数据传输失败

2 数据传输错误

recordset

检索数据源对象中默认记录集的引用

该特性为只读

repeat

检索一个事件是否被重复

该属性只有在onkeydown事件重复时才返回true

returnvalues

设置或检索从事件中返回的值

可能的值：

true 事件中的值被返回

false 源对象上事件的默认操作被取消

screenX

检索与用户屏相关的鼠标的水平位置

screenY

检索与用户屏相关的鼠标的垂直位置

shiftKey

检索shiftKey键的当前状态

可能的值 true为关闭

false为不关闭

srcElement

检索触发事件的对象

srcFilter

检索导致onfilterchange事件触发的过滤器对象

srcUm

检索触发事件行为的同一资源名称

除非下面两个条件都为真，否则该特性被设置为null

1.行为被附加到触发事件的要素上

2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件

toElement

检索作为on mouseover或者on mouseout事件结果而移动的对象

type

检索事件对象中的事件名称

检索相对于父要素鼠标水平坐标的整数

检索相对于父要素鼠标垂直坐标的整数

计算网页内容的宽与高

http://www.javaeye.com/topic/563999

jQuery–20个最新的jQuery效果:

http://www.cssrain.cn/?p=1430

jquery 源码分析

http://www.zhangjingwei.com/archives/jquery-analysis-code-1/

http://www.aliue.com/index.php

http://help.dottoro.com/ljogqtqm.php

ellipsis:

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-moz-binding: url('ellipsis.xml#ellipsis');

width:100px;

选中的文字背景：

http://daverupert.com/2010/06/web-performant-wordpress/

wijmo(基于jquery ui)

http://wijmo.com/

http://www.cnblogs.com/rubylouvre/archive/2010/11.html

网页常用js代码收集

http://www.cnblogs.com/lushuicongsheng/archive/2010/11/10/1874447.html1

看看

http://hi.baidu.com/mt20

zen-coding:

http://www.appinn.com/zen-coding/

downlist:http://code.google.com/p/zen-coding/downloads/list

小众软件：

http://www.appinn.com/

Free Image Convert And Resize (图片批量转换和调整大小) V2.0.8.5 多国语言免费

http://www.xiazaiba.com/word/Free+Image+Convert

canvas 教程

https://developer.mozilla.org/cn/canvas_tutorial

css优先级别：

id选择器>类选择器>标签选择器

important>内联样式(style="color:red")

desktop

http://desktop.sonspring.com/

去掉虚线框：

非IE:outline:none;

IE:在标签里面加属性HideFocus

http://www.js8.in/

http://www.cnblogs.com/sweetie/archive/2010/11/14/1877079.html

chrome 字体太小的问题：

-webkit-text-size-adjust:none;

font-size:10px;

wmode＝opaque 参数可以是FLASH位于最低，无法挡住下拉菜单，并且还能提高FLASH帧速，真是好参数

FALSH透明的参数为：wmode＝transparent

在线编辑调试页面

http://jsfiddle.net/

onchange,onpropertychange,oninput的区分:

http://roshanca.com/?p=95

http://roshanca.com/?s=%E9%97%AD%E5%8C%85 什么是闭包

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

a[i].onclick = function(i){

return function(){

alert(i)

}

}(i)

}

http://www.cnblogs.com/jeffwongishandsome/archive/2009/05/17/1458405.html

程序男，热爱编程、思考和阅读，现主要从事.net平台下的web开发工作，对服务端和前端编程都有浓厚的兴趣。

http://www.cnblogs.com/jeffwongishandsome/

SWFObject is better than ac_ranActieContent

scroll、client、offsetWidth等获取、设置详解

http://www.easewe.com/Article/document/257.htm

//如果提供了事件对象，则这是一个非IE浏览器

if ( e && e.stopPropagation )

　　//因此它支持W3C的stopPropagation()方法

　　e.stopPropagation();

else

　　//否则，我们需要使用IE的方式来取消事件冒泡

　　window.event.cancelBubble = true;

return false;

2.阻止浏览器的默认行为

//如果提供了事件对象，则这是一个非IE浏览器

if ( e && e.preventDefault )

　　//阻止默认浏览器动作(W3C)

　　e.preventDefault();

else

　　//IE中阻止函数器默认动作的方式

　　window.event.returnValue = false;

return false;

添加事件：

if(obj.attachEvent){

obj.attachEvent("on" + handle,fn);

}else{

obj.addEventListener(handle,fn,false)

}

移除事件：

if(obj.attachEvent){

obj.detachEvent("on" + handle,fn);

}else{

obj.removeEventListener(handle,fn.false);

}

this.getPosition = function(obj) {

var x = obj.offsetLeft, y = obj.offsetTop;

while (obj && obj.offsetParent) {

x += obj.offsetParent.offsetLeft;

y += obj.offsetParent.offsetTop;

obj = obj.offsetParent;

}

return [x, y];

};

function getStyle(obj){

var obj = document.getElementById(obj);

return obj.currentStyle ? obj.currentStyle : document.defaultView.getComputedStyle(obj,null);

}

Object.prototype.extend

http://www.cnblogs.com/5201314/archive/2009/05/22/1487213.html

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

var s = "";

s += "\r\n网页可见区域宽："+ document.body.clientWidth;

s += "\r\n网页可见区域高："+ document.body.clientHeight;

s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";

s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

s += "\r\n网页正文全文宽："+ document.body.scrollWidth;

s += "\r\n网页正文全文高："+ document.body.scrollHeight;

s += "\r\n网页被卷去的高："+ document.body.scrollTop;

s += "\r\n网页被卷去的左："+ document.body.scrollLeft;

s += "\r\n网页正文部分上："+ window.screenTop;

s += "\r\n网页正文部分左："+ window.screenLeft;

s += "\r\n屏幕分辨率的高："+ window.screen.height;

s += "\r\n屏幕分辨率的宽："+ window.screen.width;

s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;

s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;

s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

//alert(s);

for(a in document.body){

document.write(a);

document.write("----");

document.write(document.body[a]);

document.write("<br>");

}

</SCRIPT>

</BODY>

</HTML>

但上面得到的并不是窗口可见区域的尺寸（当网页没有占满整个窗口时）这时要得到高度和宽度

在IE下：document.documentElement.clientHeight

在其它浏览器下：window.innerHeight

http://webjcw.cn/dom/ref_window/innerheight.php

http://help.dottoro.com/ljknuajj.php

function fireEvent(element,event){

if (document.createEventObject){

// dispatch for IE

var evt = document.createEventObject();

return element.fireEvent('on'+event,evt)

}

else{

// dispatch for firefox + others

var evt = document.createEvent("HTMLEvents");

evt.initEvent(event, true, true ); // event type,bubbling,cancelable

return !element.dispatchEvent(evt);

}

designMode

http://www.code-design.cn/blogdetail2615.html

http://www.code-design.cn/blogdetail117.html

样式之美博客

http://www.aoao.org.cn/blog/

月影博客

http://www.silverna.org/blog/?p=73

http://bbs.51js.com/viewthread.php?tid=88174

::-moz-selection { background:#f50; color:#fff;} // FF私有属性

::selection { background:#f50; color:#fff;} //其他非IE标准浏览器

.abc::selection{} /*abc为Class名称*/

.abc::-moz-selection{}

</style>

JavaScript颜色转换的核心

JavaScript颜色转换的核心就是进制间的转换。RGB格式其实就是十进制表示法，所以，十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。

十六进制转换为十进制相对容易些，核心代码如下示例：parseInt("0xFF")，其结果就是255，”0x”就表明当前是16进制，由于parseInt后面无参数，默认就是转换为10进制了。

十进制转换为16进制，核心代码如下：var num=255; num.toString(16);，其结果是FF。”16″表示数值转换为16进制字符串。

ajax如何控制浏览器的历史记录

http://www.qgy18.com/2008/09/howto_control_browser_history/

prototype:

http://w3er.com/javascript/master-javascript-object-system/#comment-102

http://css-tricks.com (a web design community)

http://css-tricks.com/downloads/

web标准化交流会

http://www.w3ctech.com/about

对于英文文章，只需要设定 text-align:justify; 就可以实现两端对齐，

如果作者主要致力于中文写作，则需要添加text-justify:inter-ideograph属性

http://uicss.cn/category/ue-seo/

使用HTML5开发的一些精彩应用:

http://homepage.yesky.com/165/11753665.shtml

http://www.9yuer.com/index.html

http://www.9yuer.com/thread-2825.html

网页制作后期细节开发

触发文字选择的事件：onselect=function(){return false;}适应于<input type='text'><textarea>

可以彻底禁止左右键~`＜body oncontextmenu="return false"＞如果禁止用鼠标选择和复制,则加上onselectstart="return false"

可以彻底禁止左右键~`

如果禁止用鼠标选择和复制,则加上

onselectstart="return false"

即是<body oncontextmenu="return false" onselectstart="return false">

如果禁止人家粘贴则加上

onpaste="return false"

即<body oncontextmenu="return false" onpaste="return false" >

禁止剪切

oncut='return false'

六、方法集锦

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

// -->

9. 防止被人frame

<SCRIPT LANGUAGE=javascript><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. <noscript><iframe src=*.html></iframe></noscript> 网页将不能被另存为

http://www.wxwdesign.com/page/45 前端开发

http://xirang.ca/2009/12/rotating-snake-visual-illusion

http://varnow.org/?p=232 记录前端-记录成长

http://css9.net

模拟下拉列表: http://www.uur.cn/web/split/3-5_%E5%8D%95%E9%80%89%E4%B8%8B%E6%8B%89%E6%A1%86/demo.html

http://js1k.com canvas games

select option disable restyle /javascript drag study

http://www.53dns.com/ 互易中国域名/空间

第六感

http://www.the6cn.com/web/javascript/index.shtml

浮动的内联元素里面再有浮动元素，则该内联元素宽度会100%；该元素里面的元素设置diaplay:inline-block可用

faststone:

FastStone Capture 6.7　

http://www.newhua.com/soft/44264.htm

http://www.o2sky.cn/blog/

canvas资料：

http://forum.livetome.cn/thread-8588-1-1.html

http://www.html5.jp/

http://paranimage.com/html-5-canvas-tutorials-and-examples/

http://mozillalabs.com

http://www.xlnv.net

onPropertyChange onChange onInput事件:

http://hi.baidu.com/yljf184/blog/item/98df82df71fc731f62279876.html

前端：

http://www.ooso.net/

http://www.qianduan.net

http://www.cnblogs.com/zhenn/

获得选中的文字：

// 说明：获取页面上选中的文字

// 整理：http://www.CodeBit.cn

function getSelectedText() {

if (window.getSelection) {

// This technique is the most likely to be standardized.

// getSelection() returns a Selection object, which we do not document.

return window.getSelection().toString();

}

else if (document.getSelection) {

// This is an older, simpler technique that returns a string

return document.getSelection();

}

else if (document.selection) {

// This is the IE-specific technique.

// We do not document the IE selection property or TextRange objects.

return document.selection.createRange().text;

}

</script>

在 FireFox 下获取 input 和 textarea 中选中文字的解决方案:

// 说明：FireFox 下获取 input 或者 textarea 中选中的文字

// 整理：http://www.codebit.cn

function getTextFieldSelection(e) {

if (e.selectionStart != undefined && e.selectionEnd != undefined) {

var start = e.selectionStart;

var end = e.selectionEnd;

return e.value.substring(start, end);

}

else return ""; // Not supported on this browser

}

</script>

比较全面的一个：

参考：http://help.dottoro.com/ljtfkhio.php

<head>

function GetSelectedText () {

var selText = "";

if (window.getSelection) { // Firefox, Opera, Google Chrome and Safari

if (document.activeElement &&

(document.activeElement.tagName.toLowerCase () == "textarea" ||

document.activeElement.tagName.toLowerCase () == "input"))

{

var text = document.activeElement.value;

selText = text.substring (document.activeElement.selectionStart,

document.activeElement.selectionEnd);

}

else {

var selRange = window.getSelection ();

selText = selRange.toString ();

}

else {

if (document.selection.createRange) { // Internet Explorer

var range = document.selection.createRange ();

selText = range.text;

}

if (selText !== "") {

alert (selText);

}

</script>

</head>

Some text for selection.

<textarea>Some text in a textarea element.</textarea>

Select some content on this page!

</body>

http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html

http://www.flyinghail.net/page/2/

http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html

http://www.35ui.cn/

天气预报嵌套地址：

http://www.265.com/weather/59493.htm

在Opera下，对于onkeydown的默认行为是不能用event.preventDefault()来取消,用opera下onkeypress却可以。

var cancelKeypress = false;

document.onkeydown = function(evt) {

evt = evt || window.event;

cancelKeypress = (evt.ctrlKey && evt.keyCode == 84);

if (cancelKeypress) {

return false;

}

};

/* For Opera */

document.onkeypress = function(evt) {

if (cancelKeypress) {

return false;

}

};

有时候ajax返回的html类型的data，通过$(data).find("#ddd"),居然找不到，测试了下先把data数据appendTo一个容器比如body后再去$(data).find("#ddd")就可以找的到了，jquery处理方式有点怪

ie6 边框透明的解决方案：

border:2px solid transparent;

_border-color:tomato;

_filter:chroma(color=tomato);

如果是表格的话则table的border-collapse属性不能为collapse才可以实现

参考：http://blog.csdn.net/doymm2008/archive/2010/03/05/5349467.aspx

透明PNG在IE6下的官方解决方案

http://blog.csdn.net/doymm2008/archive/2010/03/05/5349374.aspx

http://hi.baidu.com/iamzhangxinxu/blog/category/.net%D1%A7%CF%B0

鼠标位置

function mousePosition(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

事件源

var e = arguments[0] || window.event;

var ele = e.target || e.srcElement;

http://www.web666.net/

http://jslover.com

ie6 fixed

.fixed{

position: fixed;

_position: absolute;

_top: expression(eval(document.documentElement.scrollTop));

}

html {

_background: url(xx.jpg) fixed;

}

http://www.planeart.cn/

简单的判断IE：if(-[1,]){//非IE}

返回毫秒数：

var a = +new Date();

http://jscrollpane.kelvinluck.com/

js学习：

http://blog.csdn.net/yangdengfeng2003/category/300597.aspx

http://wange.im/

http://www.cssshare.com/

http://www.94this.com.cn/

http://www.html-js.com/?p=1031

14个非常棒的 JavaScript 游戏开发框架推荐

http://www.cnblogs.com/lhb25/archive/2011/04/25/1965739.html

http://www.cnblogs.com/lhb25/

http://www.pigzz.com/jscode/

前端工程师blog:

http://hszy00232.blog.163.com/

再谈图片预加载：

http://www.planeart.cn/?p=1121

再谈IE6之fixed

http://www.planeart.cn/?p=877

good:

http://www.cnblogs.com/cloudgamer/

用JavaScript写出一个linux PC模拟器

http://bellard.org/jslinux/

https://github.com/

css3:

http://dotnet.aspx.cc/

http://missdora.net/blog/category/javascript/

transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现

有五种变形样式，可以重叠多种变形样式，以空格分隔

scale:缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。

rotate:水平旋转，属性值格式为Xdeg。rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转

translate:定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位

skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜。

matrix:矩阵，六个值。矩阵变形（学习完毕之后更新）

浏览器支持情况:-webkit-transform,-moz-transform,-o-transform,目前对CSS3动画支持的最好最全面的是webkit内核浏览器。

在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕的点。这个属性接受两个参数，可以是百分比、top/center/bottom、带单位的数值。

transition:transition-property transition-duration transition-timing-function transition-delay

transition-property:要实现动态转换的css属性名。可以设定为all,则动态转换所有改变的属性值，包括transform

transition-duration:设定转换的时间，单位s(秒)

transition-timing-function:过渡时的效果，可以想象下幻灯片切换时的效果。常用值：ease | linear | ease-in | ease-out | ease-in-out

transition-delay:动态转换产生的延迟时间。不常用

eg:

.color-transition{

color:red;font-size:18px;

-webkit-transition:color .5s linear;}

.color-transition:hover{

color:blue;}

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

http://www.cctry.com

http://www.xiaotai.com

.noBr

{

white-space:nowrap;

word-break:keep-all;

}

.wordBr

{

white-space:normal;

word-wrap:break-word;

}

.break

{

white-space:normal;

word-break:break-all;

}

http://hellohtml5.com/search/label/javascript

http://www.chinabyte.com/bang/html5/

function setCookie(name, value, expires, path, domain, secure){

var c = name + '=' + escape(value);

if(expires){

var d=new Date();

d.setTime(d.getTime()+expires*24*3600*1000);

c+='; Expires='+d.toGMTString();

}

c += ((path) ? '; path=' + path : '') +

((domain) ? '; domain=' + domain : '') +

((secure) ? '; secure' : '');

document.cookie = c;

}

function getCookie(name)

{

var a=document.cookie.split("; ");

name+="=";

for(var i=0;i<a.length;i++)

if(a[i].indexOf(name)==0)

return unescape(a[i].substr(name.length));

return '';

}

javascript api:

http://qefqei.com/javascript/

http://qefqei.com/jquery/

css3:

https://developer.mozilla.org/en/css/-moz-transform

http://www.css88.com/tool/css3Preview/

callee属性是arguments的一个属性，返回方法的正文。

即：func.arguments.callee = func;

利用callee属性可以轻松实现递归调用：

caller属性是方法的一个属性，返回当前调用该方法的方法。

如果在A方法中调用了B方法，在A方法执行的过程中，在B函数中存在B.caller等于A的方法体。

a:link|a:visited|a:hover|a:active

排序算法：

http://www.comp.nus.edu.sg/~xujia/mirror/algorithm.myrice.com/algorithm/commonalg/sort/index.htm#

writing-mode:tb-rl; (IE)

transform:rotate(90deg);

var documentFragment=document.createDocumentFragment();

diaplay:inline-block;

内联元素浏览器都支持；块级元素在IE6/7下面不支持，这时候加上*display:inline;*zoom:1;就可以了。

由于 inline 元素是可以自然地 vertical-align 的，因此将需要设定垂直居中的对象设定为 inline-block，同时引入一个冗余的兄弟元素同样设定为 inline-block，并且 height: 100%，再设定两者都为 vertical-align: middle。

eg:<div class="abc">

</div>

.bcd

{

height:20px;

line-height:20px;

display:inline-block;

vertical-align:middle;

*display:inline;

*zoom:1;

}

{

display:inline-block;

height:100%;

vertical-align:middle;

*display:inline;

*zoom:1;

}

typeof 运算符返回一个用来表示表达式的数据类型的字符串。

可能的字符串有："number"、"string"、"boolean"、"object"、"function" 和 "undefined"。

function createXmlHttpRequest(){

if(window.ActiveXObject){ //如果是IE6以及以下浏览器

return new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

return new XMLHttpRequest();

}

xmlHttpRequest = createXmlHttpRequest();

xmlHttpRequest.onreadystatechange = fn;

xmlHttpRequest.open("get",url,true);

xmlHttpRequest.send(null);

canvas 特效：

http://hakim.se/experiments/html5/blob/04/

reset.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,img {

border:0;

}

address,caption,cite,code,dfn,em,strong,th,var {

font-style:normal;

font-weight:normal;

}

ol,ul {

list-style:none;

}

caption,th {

text-align:left;

}

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:normal;

}

q:before,q:after {

content:'';

}

abbr,acronym { border:0;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,canvas,video,audio

{

display:block;

}

来客轩javascript 学习

http://www.wlog.cn/category/javascript/

分享到：

关于圆角的问题,谁有更好的方式？ | 获取页面元素的位置

2011-07-27 18:57
浏览 2288
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

更新下前端相关笔记

来客轩javascript 学习

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

更新下前端相关笔记

来客轩javascript 学习

评论

发表评论

相关推荐

javascript 判断对象的值是否相等

javascript 跟踪效果

javascript 判断操作系统

js获取地址栏参数

JSON对象和字符串

javascript中的编码和解码

canvas小游戏 game-bricks

css之-webkit-scrollbar

css3-animation

鼠标滚轮事件

css3

new Date(date)

background-position百分比

Model-View-Controller (MVC) with JavaScript

关于圆角的问题,谁有更好的方式？

获取页面元素的位置

ajax 基础知识

再说display的inline-block属性

javascript Object.extend的用法

html5标签

最近访客更多访客>>