分类: JS/AJAX/DOM

JS利用Canvas,跨浏览器实现图片旋转效果

目的:
对图片进行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拼接字符串效率测试

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,安全,标准的浏览器,下载地址请猛击这里

为你的PJBlog加上Twitter模块

在我的BLOG首页侧边栏,你可以看到我的Twitter模块。实现起来非常简单,Twitter提供了API接口,只需要写少少代码,就可以实现该模块。

Twitter JSON数据接口:http://twitter.com/statuses/user_timeline/15978541.json?callback=twitterCallback&count=5

15978541.json  前面这一串数字是你的用户ID,你可以在你的Twitter首页左下角的RSS链接中找到他。
twitterCallback  这是一个JS函数,只要你预先定义好它(在本文末尾下载)。然后用js的方式引入Twitter的这个链接。
count  引用Twitter条数

函数我已经写好了,所以只需要写进入到PJBlog的后台>>界面与插件>>设置模块

然后添加一个模块:侧栏,模块标识:MyTwitter,模块名称:我的Twitter,保存之后,编辑该模块的HTML,在里面写入:

<p id="myTwitter">正在加载...</p>
<script type="text/javascript" src="common/myTwitter.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/15978541.json?callback=twitterCallback&count=5"></script>

common/myTwitter.js里面包含我写好的twitterCallback函数,后面调用的就是twitter的JSON API接口。

打包下载:点击下载此文件解压到你的Blog目录即可。

当然,你还可以在Blog风格的CSS样式里加上一些CSS,用来修改Twitter的显示效果。

ol#myTwitter {list-style:none; margin:0; padding:0;}
ol#myTwitter li {margin-bottom:5px; padding-left:15px; line-height:16px; background:url(../../skins/ye_v2/twitter.gif) no-repeat;}
ol#myTwitter li a {font-style:italic;color:#666;}
ol#myTwitter li a:hover {color:#000;}

Javascript获取CSS值

IE:
element.currentStyle

currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,而对象 style.color 不能返回值。但是,如果用户指定了 <P STYLE="color:’red’">,currentStyleSTYLE 对象都将返回值 red。
currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:

  1. 内嵌样式
  2. 样式表规则
  3. HTML 标签属性
  4. 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事件冒泡

工作中偶尔会遇到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>