目的： 对图片进行90、180、270度的旋转，便于浏览照片。 实现方法： 1.IE浏览器，使用BasicImage滤镜 filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled , grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay ) Rotation:可读写。整数值(Integer)。设置或检索对象内容的旋转。0 | 1 | 2 | 3 0:默认值。内容不旋转。 1:内容旋转90度。 2:内容旋转180度。 3:内容旋转270度。 _this._img.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(Rotation=’ + _this.r + ‘)’; 2.其它标准浏览器(FireFox,Chrome,Safari,Opera)都支持Canvas，利用Canvas的rotate以及drawImage对图片进行旋转。 mozilla的Canvas文档：https://developer.mozilla.org/En/Canvas_tutorial
JavaScript开发中，经常需要组合字符串进行输出，比如接收服务端信息，然后格式化成html再显示到页面上。 一般用到两种方法来进行拼接，Array.join和+=串联字符串，为了得到最佳的效率，对这两种方法进行了测试； Array.join测试代码： var timer = new Date().getTime(); var arr = new Array(); for (var i = 0; i < 50000; i++){ arr.push(‘aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa’); } arr.join(”); document.write(new Date().getTime() – timer); +=测试代码： var timer = new Date().getTime(); var str = ”; for (var i = 0; i < 50000; i++){ [...]
IE: element.currentStyle currentStyle 对象返回了元素上的样式表，但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此，通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如，如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.currentStyle.color 将返回正确的颜色，而对象 style.color 不能返回值。但是，如果用户指定了 <P STYLE="color:’red’">，currentStyle 和 STYLE 对象都将返回值 red。 currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为： 内嵌样式 样式表规则 HTML 标签属性 HTML 标签的内部定义 W3C: window.getComputedStyle(element,pseudoElt) element 必选，HTML元素 pseudoElt 必选，获取该元素的伪类样式 关于获取css的浏览器兼容： http://www.quirksmode.org/dom/w3c_css.html jQuery里关于获取CSS的实现： function( elem, name, force ) { var ret, style = elem.style, [...]
工作中偶尔会遇到Javascript冒泡的问题，阻止冒泡的方法： W3C:stopPropagation() IE:window.event.cancelBubble = true 运行以下代码，然后注释掉”//阻止冒泡”后面那段代码，看看发生的变化。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 0 Transitional//EN” “http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.worg/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Untitled Document</title> <style type=”text/css”> div { padding:10px; border:1px solid #CCC; } #d1 { width:400px; } #msg { border-color:#CCC; padding:3px; margin-bottom:10px; } </style> <script> var isIE = /*@cc_on!@*/!1; window.onload = m; function m(){ for [...]
function replaceHtml(el, html) { var oldEl = typeof el === “string” ? document.getElementById(el) : el; /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点 oldEl.innerHTML = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl.innerHTML = html; oldEl.parentNode.replaceChild(newEl, oldEl); /* 一旦我们从 DOM 上移除老的元素，则返回新的元素引用。*/ return newEl; }; 在怿飞的Blog上看到这篇文章，里面有提到“此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 [...]
