目的:
对图片进行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++){
str += 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
}
document.write(new Date().getTime() - timer);
结果看下图(测试结果因电脑性能而异,数据只代表在我电脑上的结果):
50000次的拼接,每次拼接150个字符:

在这些比较标准的浏览器里,+=和Array.join的方法结果差不多,Opera在join后,效率降低很多。
然后对IE7进行了测试:
10000次拼接,每次拼接150个字符,不要弄5万10万的,别怪我没告诉你~

在IE7里就有相当明显的出入了,10000次拼接,差了2W多ms。
所以,拼接字符串,推荐使用join的方法,较优于+=的拼接方法,特别是在IE里,有相当大的改善。
最后嘀咕两句, IE这个**,实在不想说什么了,安全性,性能,功能,无一是处的浏览器,现在却占有着60%+的份额,我$#$&*@~~~~推荐FireFox,安全,标准的浏览器,下载地址请猛击这里
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, filter;
// IE uses filters for opacity
if ( !jQuery.support.opacity && name === "opacity" && elem.currentStyle ) {
ret = ropacity.test(elem.currentStyle.filter || "") ?
(parseFloat(RegExp.$1) / 100) + "" :
"";
return ret === "" ?
"1" :
ret;
}
// Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) {
name = styleFloat;
}
if ( !force && style && style[ name ] ) {
ret = style[ name ];
} else if ( getComputedStyle ) {
// Only "float" is needed here
if ( rfloat.test( name ) ) {
name = "float";
}
name = name.replace( rupper, "-$1" ).toLowerCase();
var defaultView = elem.ownerDocument.defaultView;
if ( !defaultView ) {
return null;
}
var computedStyle = defaultView.getComputedStyle( elem, null );
if ( computedStyle ) {
ret = computedStyle.getPropertyValue( name );
}
// We should always get a number back from opacity
if ( name === "opacity" && ret === "" ) {
ret = "1";
}
} else if ( elem.currentStyle ) {
var camelCase = name.replace(rdashAlpha, fcamelCase);
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
if ( !rnumpx.test( ret ) && rnum.test( ret ) ) {
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;
// Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = camelCase === "fontSize" ? "1em" : (ret || 0);
ret = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}
return ret;
}
工作中偶尔会遇到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 (var i=1; i<6; i++){
document.getElementById('d'+i).onmouseover = changeStyle;
document.getElementById('d'+i).onmouseout = changeStyle;
}
}
function changeStyle(e){
e = e || window.event;
var msg = document.getElementById('msg');
if (e.type == 'mouseover'){
this.style.borderColor = '#FF0000';
msg.innerHTML = '你当前鼠标经过的DIV ID:' + this.id;
}else if(e.type == 'mouseout'){
this.style.borderColor = '#CCCCCC';
msg.innerHTML = '鼠标状态';
}
//阻止冒泡
if (isIE){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="msg">鼠标状态</div>
<div id="d1">ID:d1
<div id="d2">ID:d2
<div id="d3">ID:d3
<div id="d4">ID:d4
<div id="d5">ID:d5 </div>
</div>
</div>
</div>
</div>
</body>
</html>