CSSASS三人行

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

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

我们要做的就是将offset计算出来，它的值应该等于【鼠标相对窗口的位置(即event.clientX)】减去【图片距离窗口的位置】。
莫非后一项就是obj.offsetLeft吗？但是又悲剧，其实obj.offsetLeft是元素相对于其parent的距离。

经过以上分析，我们顺理成章想到了以下这个麻烦的办法：从触发元素开始到root节点为止，把所有元素的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;} .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(包括FF):'+posX +'<br />clientX:' +e.clientX +'<br />layerX:' +e.layerX +'<br />pageX:'+ e.pageX ; } 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>

标签： offsetX, 兼容firefox
发布在 Javascript | 没有评论 »

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

第一个效果，国外网站用的挺多的。是种不错的用户体验设计。
元素在窗口移到某高度后开始有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 | 没有评论 »

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

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

<!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; //if((e.clientY)<0||(e.clientY)>document.documentElement.offsetHeight||(e.clientX)<0||(e.clientX)>document.documentElement.offsetWidth) return false; 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: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层拖动, 拖拽, 阻止冒泡, 默认事件
发布在 Javascript | 一条评论 »

流血的海豚湾作者：ONEBOYS 发表时间： 2010年05月13号，星期四阅读：394 次

我从没亲眼见过海豚，也不知道海豚是不是真的很聪明。对海豚的最近印象来自《银河系漫游指南》中的一段：海豚是地球上最智能的动物，当地球毁灭之前他一直在提醒着人类，可我们视而未见，最后他们以自己的方式逃离了地球。
《海豚湾 The Cove》是昨天晚上偶然间看的：锋利的铁锥，成千上万的海豚，无助的尖号哀叫，身受重伤做最后的挣扎扑出水面，被鲜血染红的海湾——就像一把无形的利剑刺进观看人的胸中，那是一种压抑的痛。
再当看到Richard O’Barry胸前挂在显示器到IWC会场做无声的抗议的时候，真有一种挺身而出的冲动。
阅读这个条目剩下部分 »

标签：南方公园, 君子远庖厨, 好生之德, 海豚湾
发布在 My life | 2 条评论 »

失眠夜作者：ONEBOYS 发表时间： 2010年04月4号，星期天阅读：336 次

前段时间失眠挺严重。本来加班就挺累，晚上再一失眠，精力没法恢复，精神不好导致神经衰落、精神紧张，这样一来，就失眠了。这说的好像逻辑混乱，其实恶性循环就是这么回事。所以，为了缓解神经紧张。我也找了不少法子。
1，听轻音乐，听了段时间，删减下来，留了三首曲子。（等blog装了音乐插件直接放上来）
一首是侯长青的笛&箫《滚滚红尘》——“凄婉”
一首是冯晓泉&曾格格的《雪山》——“悠远”
最后一首是最喜欢的古筝曲《呼吸》——“空灵”
2，画眼睛，失眠了就画。不知这是哪只脑袋出的馊主意，我想着，等画足了1000只的时候，我的眼睛也差不多了吧。
那双双眼睛——>http://www.douban.com/photos/album/24625652/
3，用JS写写小东西,现在在写一个小游戏《推箱子》，差不多了。想把效果做的可以匹敌flash(当然，目前来说这是不可能的)。写这东西其实搞得大脑更加紧张了，但不管怎么，现在可以躺下想上一会程序的需要如何完善，不多久也就能入睡了。嗯，居然是这一法子功劳最大。
4，随便翻点书看看。其实一开始失眠，我就不打算看书来着，因为我觉得看书是导致我失眠的一个祸因。但随意翻看一点应无大碍，也就成了前三法子腻味时候的补充了。现在桌上摆一本《韩非子》，内容刚好也属于不是绝对连贯的那种，用来随意翻看刚好。另外，也翻下《javascript权威指南》，以后也不至于在别人提起的时候因为居然没看（完）过这本书而脸上无光。

嗯，今天精神好了很多，早上在床上又出现了天马行空的妄想了。
走在路上，又有了那种从疾驰的车子上翻身而过的冲动了。
闭着眼睛，能感觉到那种将网球从高空只贯而下的状态了。

希望能完全回到以前的状态。
我还年轻。

发布在 My life | 一条评论 »

嗨，塞林格，我看了你的《麦田守望者》作者：ONEBOYS 发表时间： 2010年02月28号，星期天阅读：410 次

谁要是有塞林格在天堂的电话，请一定要告诉我，我真想打个电话向他说声我拜读了你的《麦田》，我想说你剽窃了我的一些想法——开个玩笑罢了，我知道你是开得起玩笑的。我有时候经常胡思乱想，这个症状总有上百年了吧，我是诧异老霍尔顿也有这个症状，如果你还和老霍尔顿有联系，请代我向他问好。

你要是让我在几十年前就能有机会，我是说不管是闲情雅致的，还是消遣时间的，总之是能够让我看到这本书，哪怕是瞥到那么一个开头，我觉得我一定会死命的读上一千遍——我不是说我现在读它的时候没有死命的读，我只是没能读上个一千遍，因为你也知道，我的现在的工作不是读书，我的混账工作是挣钱呢——嘿，我估计我当时说不准也会想着计划到哪个破麦田里去做个傻里傻气的守望者，不骗你，我会的，我估计在几十年前那个时候我会的，只要能有这样的地方。

可惜根本没他妈的这种地方，是吧，哪里会只有无忧无虑的小孩呢，哪里会只有小孩而只有你一个大人呢，哪里会有小孩无忧无虑却允许你一个大人混在他们里面的。你也知道没这种混账的好地方，霍尔顿也知道没这种的地方，这样他才想着到西部随便什么地方去，一个人，也不带上老菲比——那是个多可爱聪明又单纯有意思的小女孩啊，他不就想在麦田里当孩子们的守望者吗？——随便找个什么工作的——也不谈什么守望者的工作了。所以说大家都知道，根本没这种狗屁地方，也根本没这种混账工作，到麦田里的守望者都是说给自己听的鬼话罢了——或许只有我一个人在偶然的瞬间里当真了。

假如真没有什么麦田守望者的岗位，我也可以先随便找个什么没有人认识的狗屁地方，找个随便什么的混账工作。说到混账工作，能有什么工作不混账呢，每天都是浑浑噩噩的消磨时间，每天都是假模假式的面对别人，提起来就能腻死一个人。所以我也可以按霍尔顿那么打算，我可以每天不说话，装成又聋又哑的，当别人问你你也别说，这样久了，别人也就以为你是个又聋又哑的。你说我这样是逃避？哦，你真是冤枉死我了，如果你走在一条让人作呕的狗屎路上，你难道不避开吗？我不是说所有路都是狗屎的，我也正在找一条没有狗屎的路呢。相信我，有这样的路我干嘛还要避着走呢。可怜的霍尔顿当时没走成，我真替他难过，我要是在那，我真的想过去安慰他。尽管我自己也没走成。

但是，到了现在，要是有人说让你走，你走不走？我绝对想殴他，我不冤枉他，我对天发誓他是在挖坑害我。没有钱，没有地图，没有没狗屎路的过路票，我想我都会一直走到狗屎堆里去，他就是这个目的，让我走的那个家伙。还是安多里尼先生的告诫说的不错，他说的是“一个不成熟的男人的标志是他愿意为某种事业英勇的死去，一个成熟男人的标志是他愿意为某种事业卑贱地活着。”感谢安多里尼先生的总结，我终于找到了适合自己的狗屎事业，虽然很微小，但适合我，我可以都不需要怎么说话，因为我现在的工作是整天敲代码，我和代码交流，你知道要是我和代码说着话，大家都会以为我疯了——不过我们的确在交流，不带假模假式的，我为了它卑贱并快乐着，甚至都有些热爱。很荣幸我成为了一个成熟的男人。

塞林格，一个成熟的男人向你问午安，我是很真诚很真诚的，不带任何假模假式的。

发布在 My life, 咬文嚼字 | 一条评论 »

2 / 17«123 4 5 »...尾页 »

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

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

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

流血的海豚湾 作者：ONEBOYS 发表时间： 2010年05月13号，星期四 阅读：394 次

失眠夜 作者：ONEBOYS 发表时间： 2010年04月4号，星期天 阅读：336 次

嗨，塞林格，我看了你的《麦田守望者》 作者：ONEBOYS 发表时间： 2010年02月28号，星期天 阅读：410 次