图片旋转的小例子

六月 11, 2010 by 小寒 2 comments 
<script type="text/javascript">
var c1 = document.getElementById("c1");
	ctx = c1.getContext("2d"),
	image = document.createElement("IMG");
image.onload = function() {
	c1.width = image.height;
	c1.height = image.width;
	ctx.translate(0, image.width);
	ctx.rotate(270*Math.PI/180);
	ctx.drawImage(image, 0, 0);
}
image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif";
</script>

IE应该用滤镜实现同样的效果。

rotate()这个函数接收的是弧度值。角度乘以0.017(2π/360)可以转变为弧度。

图片转转转

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<canvas id="c1"></canvas>
	<script type="text/javascript">
	var image = document.createElement("IMG");
	image.onload = function() {
		var c1 = document.getElementById("c1"), rotate = null,
			len = Math.sqrt(Math.pow(image.width, 2) + Math.pow(image.height, 2)),
			center = {x: len / 2, y: len / 2};

		//判断是否为IE
		if(/*@cc_on!@*/0) {
			(function() {
				var div = document.createElement("DIV");
				div.style.position = "relative";
				div.style.marginTop = div.style.marginLeft = len / 2 + "px";
				div.appendChild(image);
				c1.parentNode.insertBefore(div, c1);
				c1.parentNode.removeChild(c1);
				c1 = null;

				image.style.position = "absolute";
				//设置滤镜
				image.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
				var filter = image.filters.item(0);
				filter.SizingMethod = "auto expand";
				filter.FilterType = "bilinear";	

				rotate = function(rad){
					var costheta = Math.cos(rad),
						sintheta = Math.sin(rad);
					filter.M11 = filter.M22 = costheta;
					filter.M12 = -(filter.M21 = sintheta);

					//将图片的重心调节到旋转点。
					image.style.top = (-image.offsetHeight) / 2 + 'px';
					image.style.left = (-image.offsetWidth) / 2 + 'px';
				}
			})();
		} else {
			(function() {
				var ctx = c1.getContext("2d");
				rotate = function(rad){
					c1.width = c1.height = len;
					ctx.translate(center.x, center.y);
					ctx.rotate(rad);

					//绘制图片，并将图片的重心调节到旋转点。
					ctx.drawImage(image, -image.width / 2, -image.height / 2);
				}
			})();
		}		

		//开始旋转
		(function() {
			if(rotate) {
				var angle = 0;
				setInterval(function() {
					var	rad = ((angle++)*Math.PI / 180) % 360;
					rotate(rad)
				}, 10);
			}
		})();
	}
	image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif";
	</script>
</body>
</html>

点击查看DEMO

JavaScript

:after伪类的小应用

六月 10, 2010 by 小寒 0 comments 
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
h1[id]:hover::after {
content: " #"attr(id);
}
</style>
</head>
<body>
<h1 id="test">测试标题</h1>
</body>
</html>

注：h1[id]只选择有id属性的h1标签。

CSS

用CSS禁用输入法

五月 25, 2010 by 小寒 0 comments

用简单的一行CSS就可以在表单元素里禁用输入法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>TEST</title>
	<style type="text/css">
		.ime-disabled {
			ime-mode: disabled;
		}
	</style>
	<script type="text/javascript">
	</script>
</head>
<body>
	<input type="text" /><br />
	<input class="ime-disabled" type="text" />
</body>
</html>

不一定兼容所有浏览器，目前测试过并且支持ime-mode的有IE6和FF。

CSS

IE6中选择器的BUG

五月 21, 2010 by 小寒 0 comments

请仔细观察下面的代码，在FF中是正常显示的，但在IE6中字体变成了红色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>TEST</title>
	<style type="text/css">
		.span.text a {
			color: red;
		}
	</style>
</head>
<body>
	<span class="text"><a href="#">IE6下是红的</a></span>
</body>
</html>

象.a.b与.a.b.c这种写法，ie6只能识别最后一个选择器，也就是.b和.c。

CSS

触发hasLayout引起的BUG

五月 19, 2010 by 小寒 2 comments

在IE6下面，很多显示的BUG都可以用触发hasLayout的方式去解决。但有种情况正好相反，触发hasLayout之后会产生显示的BUG。请看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Demo</title>
	<style type="text/css">
		#div1 {
			background: red;
			margin: 10px;
			padding: 10px;
		}
		#div2 {
			background: gray;
			margin: 30px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">TEST</div>
	<div>
</body>
</html>

上面的代码在所有浏览器里是正常显示的，包括IE6。但是给#div1设定宽度之后（触发hasLayout），经过大量测试，在IE6下#div1上面的padding会消失。有兴趣的同学可以看这篇文章：IE7-/Win: Margin collapsing and hasLayout

目前解决的办法就是去掉#div1的宽度，然后在#div1外面套一层div，在这个新div上设定宽度。解决问题的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Demo</title>
	<style type="text/css">
		#con {
			width: 400px;
		}
		#div1 {
			background: red;
			margin: 10px;
			padding: 10px;
		}
		#div2 {
			background: gray;
			margin: 30px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div id="con">
		<div id="div1">
			<div id="div2">TEST</div>
		<div>
	</div>
</body>
</html>

CSS

IE6是支持!important的

四月 27, 2010 by 小寒 0 comments

由于本人最近沉迷于iPhone不能自拔，所以很久没有更新博客了。转入正题：

网上很多讲CSS HACK的教程都有这样的内容，如果想写一个让FF、IE7、IE8可以识别，并且IE6不能识别的CSS HACK，就用!important。造成的结果就是很多人以为!important在IE6下根本不支持，本人当时就是受害者之一。!important在CSS1中就有描述，链接如下：http://www.w3.org/TR/CSS1/#important。为什么会造成IE6不支持的假象呢，原因是IE6有BUG。在IE6中，下面的这段代码显示是不正确的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background: red !important;
			background: yellow;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在标准浏览器下，这个DIV应该是红色的，但在IE6下是黄色的。这个只能说是IE6的BUG，而不能说IE6完全不支持!important。如果把上面的代码改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background: red !important;
		}
		div {
			background: yellow;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

怎么样，可以正常显示了吧。同理，下面的代码在IE6下也可以正确显示的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background: red !important;
		}
		#div1 {
			background: yellow;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

结论：作为CSS优先级别的老大，!important是全浏览器兼容的。

CSS

阻止Firefox缓存input的值

四月 12, 2010 by 小寒 0 comments

在Firefox里面input的值会被缓存起来，刷新页面之后，会恢复成刷新之前的值。有的时候我们并不希望这么做，可以用autocomplete=”off”来阻止Firefox的默认机制。

比如下面的代码，在刷新页面之后input的值全部为空。

<form>
<input autocomplete="off" type="text" /><br />
<input autocomplete="off" type="text" /><br />
<input autocomplete="off" type="text" /><br />
<input autocomplete="off" type="text" /><br />
</form>

为了方便也可以这样写：

<form autocomplete="off">
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
</form>

HTML

把无损音乐文件转到iPhone里

四月 10, 2010 by 小寒 0 comments

从网上下载了一张理查德.克莱德曼的CD，是.flac格式的，还带了一个.cue文件。我想把这张专辑转到iPhone里，用DAEMON Tools试着加载了一下.cue文件，结果报错了。在网上查了一下，用Foobar把.flac转换成.wav格式，然后用记事本把.cue文件打开，并且编辑下对应的CD文件名，比如把理查德.克莱德曼.flac改成理查德.克莱德曼.wav。然后用DAEMON Tools加载.cue文件，之后就可以在iTunes里进行转换了。

个人日记

消失的列表背景

四月 1, 2010 by 小寒 0 comments

IE6中设定了position: relative; float: left的容器下，如果存在着多个带有背景的列表，那么这些列表中有一部分会显示不正常，具体的表现为背景消失。例如下面的代码（请在IE6中查看）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
</head>
<style type="text/css">
	#container {
		position: relative;
		float: left;
	}
	#container li {
		background: red;
	}
</style>
<body>
	<div id="container">
		<ul>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
		</ul>
		<ul>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
		</ul>
		<ul>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
			<li>Hello Kitty</li>
		</ul>
	</div>
</body>
</html>

解决的方法是给li也加上position: relative。这个BUG的具体描述，请参考：http://www.positioniseverything.net/explorer/ie-listbug.html

CSS

IE6，IE7中负缩进的问题

三月 26, 2010 by 小寒 0 comments

在IE6，IE7下面给display: inline-block的元素设置text-indent: -9999px会把这个元素以及后面的元素拉走。请在IE6和IE7下，查看演示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>TEST</title>
	<style type="text/css">
		.bar {
			border: 1px solid;
			display: inline-block;
			height: 18px;
		}
		.bar .icon {
			display: inline-block;
			width: 16px;
			height: 16px;
			background: red;
			text-indent: -9999px;
		}
	</style>
	<!--[if lte IE 7]>
	<style type="text/css">
		.bar {
			display: inline;
		}
	</style>
	<![endif]-->
</head>
<body>
	<input type="text" />
	<div class="bar">
		<span class="icon"></span>
		<span>HELLO KITTY HELLO KITTY HELLO KITTY</span>
	</div>
</body>
</html>

在IE6，IE7下可以看到.bar里面的内容都没有了。最开始的想法是让.icon浮动来解决这个问题，可是用css hack给.icon加上float: left居然不起作用，.icon后面的文字仍然被拉走。这时候只好在blueidea求助，结果那里的版主（yoom）想法和我的一样，让.icon浮动，但是他比我多加了个display: block，最终这个BUG被修正了。正常情况下，span元素加上float之后就已经是block级别了，但就是这个display: block起了决定性的作用，按yoom的话说，真是无心插柳啊。

最终的CSS HACK为：

<!--[if lte IE 7]>
<style type="text/css">
	.bar {
		display: inline;
	}
	.bar .icon {
		display: block;
		float: left;
	}
</style>
<![endif]-->

CSS