CSSASS三人行

参与《阿凡达》项目作者：ONEBOYS 发表时间： 2010年08月3号，星期二阅读：1,780 次

刚看完一本科幻短片《海水高山》，大刘的作品。

“山无处不在”，宇宙浩瀚无边。攀登探索是人类骨子里的东西。
我们一生会放弃许多，但坚持的东西一旦放弃，那我们还能拥有什么呢?

（所以我坚持着闷骚 *V* ）

PS: 如何使用一张照片生成3D动画。
选择一：http://labs.mppark.jp/hige/ （在线应用）
选择二：CrazyTalk (桌面软件)

标签： ps, 阿凡达
发布在 Photoshop | 一条评论 »

I see you 作者：ONEBOYS 发表时间： 2010年08月2号，星期一阅读：1,359 次

You are like a baby

标签：手绘, 鼠绘
发布在 Photoshop, 相册 | 一条评论 »

offsetX/Y for Firefox 作者：ONEBOYS 发表时间： 2010年07月29号，星期四阅读：1,689 次

现在的相册大多有这个功能，鼠标点在照片的左边，可以跳到上一张，点到右边则跳到下一张。
这就需要一个坐标点的计算：(鼠标相对图片的位置) vs (图片的尺寸/2)。
后一个(图片的尺寸/2)简单，使用obj.offsetWidth/2。
前一个(鼠标相对图片的位置)好像也简单，有个事件属性叫 event.offsetX。
但是很悲剧，firefox并不支持offsetX！

我们要做的就是将offset计算出来，它的值应该等于【鼠标相对窗口左边境的位置(即event.clientX)】减去【图片到窗口左边境的距离】。
莫非后一项（图片到窗口左边境的距离）就是obj.offsetLeft吗？

但是又悲剧，obj.offsetLeft并没有这么简单，他是相对于“offsetParent”的距离，即应该是距其上级中定位元素的距离(如果不存在这个元素，则相对于整个页面文档)。
更糟的是：对于ie6,ie7，obj.offsetLeft是相对其直接父级的距离——显然他们没有遵循标准。

<!doctype html>
<html>
<head>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
#a{width:500px;height:500px;background:#ccc;padding:50px;}
#b{width:400px;height:400px;background:#ddd;padding:50px;}
#c{width:300px;height:300px;background:#eee;padding:50px;}
</style>
</head>
<body>
<div id='a' style='position:relative;'>
	a
	<div id='b'>
	b
		<div id='c'></div>
	</div>
</div>
</body>
<script>
	$id=function(o){return document.getElementById(o) || o }
	$id('c').innerHTML='c的offsetLeft=' + $id('c').offsetLeft
</script>
</html>

经过以上分析，我们可以使用以下这个麻烦的办法：从触发元素开始到root节点为止，把各级offsetParent元素的offsetLeft加起来得到【图片到窗口的距离】。
对，排除投机的办法，唯有这样了。参见：Differences in the event object properties/methods(请搜索pageX)（这里你可以注意一下：当元素是定位元素时候，即relative/absolute元素。那私有属性layerX就等于非firefox浏览器下的offsetX——这便是投机的方法，但不失为一个简单的好方法。）

demo:

<!DOCTYPE html>
<html>
<head>
<title>兼容firefox的offsetX</title>
<style type="text/css">
.box{width:300px;height:150px;border:1px solid #ccc;margin:50px;padding:50px;border:3px solid #ccc;font-size:12px;}
.ruler{position:relative;}
</style>
</head>
<body>
<div class='box'>
	<img class='ruler' src='http://www.ibm.com/developerworks/cn/linux/l-pixelruler/ruler10.gif' onmousemove='sizer(event)' />
	<div id='ct'></div>
</div>
<script type='text/javascript'>
var $id=function(id){
	return document.getElementById(id) || id;
}
function sizer(e){
	var e=window.event || e,
		posX=(e.offsetX==undefined) ? getOffset(e).offsetX : e.offsetX ;
		$id('ct').innerHTML='offsetX:'+posX + ' <i>(FF不支持，但通过其他方法获取)</i>'
+'<br />clientX:' +e.clientX
+'<br />layerX:' +e.layerX + ' <i>(ie,opera不支持)</i>'
+'<br />pageX:'+ e.pageX + ' <i>(ie不支持)</i>'
;
}
function getOffset(e)
{
  var target = e.target;
  if (target.offsetLeft == undefined)
  {
    target = target.parentNode;
  }
  var pageCoord = getPageCoord(target);
  var eventCoord =
  {     //计算鼠标位置（触发元素与窗口的距离）
    x: window.pageXOffset + e.clientX,
    y: window.pageYOffset + e.clientY
  };
  var offset =
  {
    offsetX: eventCoord.x - pageCoord.x,
    offsetY: eventCoord.y - pageCoord.y
  };
  return offset;
}
function getPageCoord(element)    //计算从触发到root间所有元素的offsetLeft值之和。
{
  var coord = {x: 0, y: 0};
  while (element)
  {
    coord.x += element.offsetLeft;
    coord.y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}
</script>
</body>
</html>

标签： offsetLeft, offsetX, 兼容firefox
发布在 DOM, Javascript, 浏览器与兼容 | 没有评论 »

两种常见的页面元素fixed/滑动效果。作者：ONEBOYS 发表时间： 2010年05月21号，星期五阅读：1,378 次

第一个效果，国外网站用的挺多的。是种不错的用户体验设计。
元素在窗口移到某高度后开始有fixed效果。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
*{padding:0;margin:0;}
html{height:100%}
body{height:200%}
.top{height:100px;background:#ccc;}
.fix{width:100px;height:100px;background:#999;}
</style>
</head>
<body>
	<div class="top">header</div>
	<div class="fix" id="fix">滚动窗口到某高度是此元素表现fixed效果</div>
</body>
<script type="text/javascript">
var $id=function(id){
	return (document.getElementById(id)) || id;
 }
var tip = function(space){	   // 离窗口上方多少值时，开始fixed
	var ie6 = /msie 6/i.test(navigator.userAgent);
	var fix= $id('fix');
	var top= fix.offsetTop;
	var fixed = function(){
			var pos = document.documentElement.scrollTop + document.body.scrollTop;
			if(pos+space >= top){
				ie6 ?
				void(fix.style.position = "absolute") + void(fix.style.top=pos+space+"px") :
				void(fix.style.position = "fixed") + void(fix.style.top = space + "px");
			}
			else{
				ie6 ?
				void(fix.style.position ="") + void(fix.style.top=top+"px") :
				void(fix.style.position ="") + void(fix.style.top=top+"px");
			}
	};
	 return fixed;
};
window.onscroll = tip(20);
</script>
</html>

众所周知，ie6不支持fixed属性。所以对其是特殊设置，拖动时会有抖动。
注意一下这里：var pos = document.documentElement.scrollTop + document.body.scrollTop;
这是兼容webkit的写法。webkit内核的浏览器下，document.documentElement.scrollTop值始终为0，document.body.scrollTop才有其意。而其他浏览器恰恰想反。

这里的方法只针对了单个元素。如果要应用到多个元素中（实际应用中不太常见吧），还要费些周折。
需要在绑定的方法tip上使用对象作为参数进行传递，对象则对应各个要fixed的元素。

第二种效果，国内用的比较多。特别是以前，一般都是做铺天盖地的浮动广告的。当然，这错不在方法，呵呵。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
	*{padding:0;margin:0;}
	html{height:100%;}
	body{height:200%;}
	.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
	<div class="box" id="box1" style="bottom:0;left:0;">底部</div>
</body>
<script type="text/javascript">
var $id=function(id){
	return (document.getElementById(id)) || id;
}
var locked=false;
var scroll=function (o){
	var space=$id(o).offsetTop;
	$id(o).style.top=space+'px';  /* 初始化top值 */
	var fixed = function(){
			if(locked) return;
			locked=true;
			var roll=setInterval(function(){
				var height =document.documentElement.scrollTop+document.body.scrollTop+space; //这两个scrollTop在chrome下有特殊。但二者必有一为0；
				var top = parseInt($id(o).style.top);
				if(height!= top){
					goTo = height-parseInt((height - top)*0.9);	   /* 一个简单的缓动算法 */
					$id(o).style.top=goTo+'px';
				}
				else{
					if(roll) clearInterval(roll);
					locked=false;
				}
			},50);
	}
	return fixed;
}
window.onscroll=scroll('box1');
</script>
</html>

同样，这里只绑定了一个元素。而这种效果常常是要多个元素一起“飘”的，除了上面一样可以传对象外。
还有个方案：就是无限调用，而不是将方法绑定在window.onscroll 上。
即如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
	*{padding:0;margin:0;}
	html{height:100%;}
	body{height:200%;}
	.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
	<div class="box" id="box1" style="bottom:0;left:0;">底部</div>
	<div class="box" id="box2" style="top:0;right:0;">顶部</div>
</body>
<script type="text/javascript">
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
	var space=id(o).offsetTop;
	id(o).style.top=space+'px';
	void function(){
			var goTo = 0;
			var roll=setInterval(function(){
				var height =document.documentElement.scrollTop+document.body.scrollTop+space;
				var top = parseInt(id(o).style.top);
				if(height!= top){
					goTo = height-parseInt((height - top)*0.9);
					id(o).style.top=goTo+'px';
				}
				//else{if(roll) clearInterval(roll);}	 //这里就不应清除循环调用了。
			},50);
	}()
}
scroll('box1');
scroll('box2');
</script>
</html>

这个方案很常用，简单好用。只是效率上可能会被人说道。

标签： fixed, 滑动效果
发布在 Javascript | 2 条评论 »

元素的拖动效果作者：ONEBOYS 发表时间： 2010年05月13号，星期四阅读：1,864 次

先看一下普通的拖动元素的代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>简单拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
.tips{position:absolute;background:#eee;width:100px;height:100px;}
</style>
</head>
<body>
<div class="tips" onmousedown="drag(this,event);">
	拖动框
</div>
</body>
<script type="text/javascript">
var drag=function(o,e){
	var e = e ? e : window.event;
	var tX=o.offsetLeft,
		tY=o.offsetTop,
		dx=e.clientX,
		dy=e.clientY;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		o.style.left=tX+(e.clientX-dx)+"px";
		o.style.top=tY+(e.clientY-dy)+"px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</html>

非常简单。

考虑一下边境问题：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>简单拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
.tips{position:absolute;background:#eee;width:100px;height:100px;}
</style>
</head>
<body style="">
<div class="tips" onmousedown="drag(this,event);">
	拖动框
</div>
</body>
<script type="text/javascript">
var drag=function(o,e){
	var e = e ? e : window.event;
	var tX=o.offsetLeft,
		tY=o.offsetTop,
		dx=e.clientX,
		dy=e.clientY;
	var largeL = document.documentElement.offsetWidth -  o.offsetWidth,
		largeT = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) - o.offsetHeight;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		var oX = tX + (e.clientX - dx),
			oY = tY + (e.clientY - dy);
			(function(){
			/* 考虑边境 */
				if(oX > largeL || oX < 0){
					/* 横向超出 */
					if(oX < 0){
						o.style.left = 0 + "px";
					}else{
						o.style.left = largeL + "px";
					}
				}else{
					o.style.left = oX + "px";
				}
				if(oY > largeT || oY < 0){
					/* 纵向超出 */
					if(oY < 0){
						o.style.top = 0 + "px";
					}else{
						o.style.top = largeT + "px";
					}
				}else{
					o.style.top = oY + "px";
				}
			})();
//			o.style.left = oX + "px";
//			o.style.top = oY + "px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</html>

如果拖动层内有元素不允许拖动。可以绑定一个事件，阻止拖动处理函数的执行。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>简单拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
.tips{position:absolute;background:#eee;width:180px;height:200px;}
textarea{font-size:12px;}
</style>
</head>
<body>
<div class="tips" onmousedown="drag(this,event);">
	<textarea cols='25' rows='5' onmousedown="(document.all)?(event.cancelBubble = true) : (event.stopPropagation())">阻止拖动区域（ie,ff支持cancelBubble; ie除外，都支持标准stopPropagation()）</textarea>
	可以拖动区域
</div>
</body>
<script type="text/javascript">
var drag=function(o,e){
	var e = e ? e : window.event;
	var tX=o.offsetLeft,
		tY=o.offsetTop,
		dx=e.clientX,
		dy=e.clientY;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		o.style.left=tX+(e.clientX-dx)+"px";
		o.style.top=tY+(e.clientY-dy)+"px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</html>

图片的drag&drop需要注意浏览器中在拖动图片时候会有默认动作的，拖动带链接的内容也是。所以拖动这些内容时应阻止其事件。（下面拖动代码略有差别）

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
.tips{position:absolute;background:#eee;}
</style>
</head>
<body>
<div class="tips" id="tips1" onmouseover="dragF.drag('tips1');">
	<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">
	拖动图片
</div>
<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');">
	<a href="http://www.cssass.com" target="_blank">链接</a><br />
	拖动链接也可以
</div>
</body>
<script type="text/javascript">
var $id=function(id){return document.getElementById(id);}
var dragF={
	locked:false,
	lastObj:undefined,
	drag:function(obj){
		$id(obj).onmousedown=function(e){
			var e = e ? e : window.event;
			if(!window.event) {e.preventDefault();}		/* 阻止标注浏览器下拖动a,img的默认事件 */
			dragF.locked=true;
		  	$id(obj).style.position="absolute";
			$id(obj).style.zIndex="100";
			if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {		 /* 多元素拖动时候需要恢复上一次元素的状态 */
				dragF.lastObj.style.zIndex = "1";
			}
			dragF.lastObj=$id(obj);
			var tempX=$id(obj).offsetLeft;
			var tempY=$id(obj).offsetTop;
			dragF.x=e.clientX;
			dragF.y=e.clientY;
			document.onmousemove=function(e){
				var e = e ? e : window.event;
				if(dragF.locked==false) return false;
				$id(obj).style.left=tempX+(e.clientX-dragF.x)+"px";
				$id(obj).style.top=tempY+(e.clientY-dragF.y)+"px";
				if(window.event) {e.returnValue=false;}		/* 阻止ie下a,img的默认事件 */
			}
			document.onmouseup=function(){
				dragF.locked=false;
			}
		}
	}
}
</script>
</html>

标签： drag&drop, 拖动层, 拖拽, 阻止冒泡, 默认事件
发布在 Javascript | 一条评论 »

9 / 27« 首页...«7 8910 11 »...尾页 »

参与《阿凡达》项目 作者：ONEBOYS 发表时间： 2010年08月3号，星期二 阅读：1,780 次

I see you 作者：ONEBOYS 发表时间： 2010年08月2号，星期一 阅读：1,359 次

offsetX/Y for Firefox 作者：ONEBOYS 发表时间： 2010年07月29号，星期四 阅读：1,689 次

两种常见的页面元素fixed/滑动效果。 作者：ONEBOYS 发表时间： 2010年05月21号，星期五 阅读：1,378 次

元素的拖动效果 作者：ONEBOYS 发表时间： 2010年05月13号，星期四 阅读：1,864 次

参与《阿凡达》项目作者：ONEBOYS 发表时间： 2010年08月3号，星期二阅读：1,780 次

I see you 作者：ONEBOYS 发表时间： 2010年08月2号，星期一阅读：1,359 次

offsetX/Y for Firefox 作者：ONEBOYS 发表时间： 2010年07月29号，星期四阅读：1,689 次

两种常见的页面元素fixed/滑动效果。作者：ONEBOYS 发表时间： 2010年05月21号，星期五阅读：1,378 次

元素的拖动效果作者：ONEBOYS 发表时间： 2010年05月13号，星期四阅读：1,864 次