Javascript | CSSASS

“Javascript”目录存档

小试canvas鼠标绘图

2010年09月2号，星期四

只是小小的Demo。

<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>cssass.com</title> <style> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} </style> </head> <body title='鼠标绘图'> <canvas id="pad" width='1800' height='1000' onmousedown=draw(event) style='border:1px solid #ccc'>ie用户(9以下)请忽略</canvas> <script type="text/javascript"> var $id=function(n){ return document.getElementById(n) || n; } var D={ width : 1 , randRGB : function(){ return Math.round(Math.random()*250) }, color : function(){return 'rgba(' + D.randRGB() + ',' + D.randRGB() + ',' + D.randRGB() + ' , 1)'} } var draw=function(e){ var e=window.event || e; var o=$id("pad"); var con=o.getContext('2d'); con.beginPath(); con.moveTo(e.clientX,e.clientY); con.strokeStyle = D.color(); con.lineWidth=D.width; con.lineCap ='round'; con.lineJoin = 'round'; document.onmousemove=function(e){ con.lineTo(e.clientX,e.clientY); con.stroke(); document.onmouseup=function(){ document.onmousemove=null; } } } </script> </body> </html>

html canvas应用前景将无可限量——刚看到baidu UEO有一个鼠标点分析热力图的项目。

因为粗略的做好后，没怎么测试就直接发上来了。所以有了些问题，现已修改。
感谢BoKeam的提醒，呵呵。

我之前用window.onload来绑定函数修改canvas的高度，这通过运行框运行open新页面，在chrome下获取document.documentElemnet.offsetHeight时会等于0，导致绘图板高度也没了。
另外发现，Opera下绘线同其他浏览器有点差别：单独的一个path(即同上一次的path没有瓜葛)，如果没有moveTo设置起点，一般浏览器会以第一个lineTo为起点，这在Opera下是不正确的。

标签：canvas, html5
发布在 Html, Javascript | 2 条评论 »

模拟引力环境下的运动轨迹

2010年08月28号，星期六

话说这篇文章的起源还得从1643年1月4日谈起。这一天，一位引领人类认知世界的巨人诞生了，他就是艾萨克·牛顿（Isaac Newton）。
扯远了，就近一点：2010年1月4日，为了纪念牛顿，google设计了一个Google Doodles
看这里：今日google纪念logo,典型的物理运动实现
进口审核剪切版：

<input type="button" value="demo" onclick="demo()" /> <img id="fall" src="http://www.google.com/logos/newton09-apple.png" style="position:absolute;left:200px;top:46px"/> <script type="text/javascript"> function demo(){ var h=1,k=-0.5,f=document.getElementById('fall'), i=setInterval(function(){ if(f){ var y=parseInt(f.style.top) + h; if(y<210) {h+=2} else{ h*=(h>1)?k:0 } f.style.top=y+'px'; } if(h==0){clearInterval(i);h=1;} },25); } </script>

随后，我便模拟了一个重力环境下的抛物线运动：

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>模拟重力环境下的抛物运动（假使1px==1mm）</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} p{margin:2px;font-size:12px;} label{display:inline-block;width:80px;text-align:right;} input{width:80px;} .wrap{position:relative;width:800px;height:500px;margin:5px;border:1px solid #ccc;} #fall{width:20px;font-size:0;height:20px;background:orange;position:absolute;top:0;left:0;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> </head> <body> <p><label>横向初速度：</label><input id="Vx" type="text" value="3" />px/ms</p> <p><label>纵向初速度：</label><input id="Vy" type="text" value="0" />px/ms</p> <p><label>重力加速度：</label><input id="a" type="text" value="0.0098" />px/平方ms</p> <p>（如果这个加速度是一个随时间变化的值，就能达到其他非匀加速运动的效果了。）</p> <p><label>单位时间：</label><input id="t" type="text" value="10" />（记录运动的时间间隔） <p><button type="button" onclick="demo()">演示</button></p> <div class="wrap"> <div id="fall">o</div> </div> </body> <script type="text/javascript"> var $id=function(o) { return document.getElementById(o) || o; } var demo=function() { var x=$id('Vx').value, y=$id('Vy').value, a=$id('a').value, t=$id('t').value; shoot(x,y,a,t); } var shoot=function(x,y,a,t) { var f=document.getElementById('fall'); var Vx=parseInt(x), Vy=parseInt(y), g=a, t=parseInt(t), h=0,l=0,Sx=0,Sy=0; var i=setInterval(function(){ if(f){ Sx+=Vx*t; l=Sx; Vy+=g*t; h+=Vy*t; if(h>480) { h=480; clearInterval(i); } if(l>780) { l=780; clearInterval(i); } f.style.left=l+'px'; f.style.top=h+'px'; } },t); } </script> </html>

模拟采用的公式

V=V0+aT;
S=S0+VT;
T：运动的时间间隔，是固定值。

这个公式有别于那种运动模拟中常用的补间动画公式（tween算法）。
补间动画是需要事先确定总路程，和总时间的，
而我们模拟的运动轨迹没有事先计算，因为我们运动中间或许还有一些变数，比如撞击，主动改变方向（键盘控制）等等，所以我觉得这个物理公式更能模拟出真实的各种运动。

直至本月前两天，某同事向我展示了这个：
重力版google(浏览首选chrome,safari,次选opera,firefox,若是ie9以下请无视)
膜拜啊。js且不论，css3已经大量使用了。我还只局限用用阴影，圆角呢。

不才，也做一个关于落体，撞击，摩擦的简单模拟。以表膜拜。

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>模拟引力环境下的撞击、摩擦、落体运动</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} p{margin:2px;font-size:12px;} label{display:inline-block;width:80px;text-align:right;} input{width:80px;} #fall{width:20px;font-size:0;height:20px;background:orange;position:absolute;top:50px;left:400px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> </head> <body> <p><label>横向初速度：</label><input id="Vx" type="text" value="3" />px/ms</p> <p><label>纵向初速度：</label><input id="Vy" type="text" value="0" />px/ms</p> <p><label>重力加速度：</label><input id="a" type="text" value="0.01" />px/平方ms</p> <p><label>单位时间：</label><input id="t" type="text" value="10" />（记录运动的时间间隔） <p>(摩擦，碰撞的消耗并没有按公式进行计算，纯属于杜撰，是不符合规律的，仅仅是模拟。)</p> <p><button type="button" onclick="demo()">演示</button> <button type="button" onclick="document.location.reload()">重置(可拖动放置)</button></p> <div id="fall" onmousedown='drag(this,event)'>o</div> </body> <script type="text/javascript"> var $id=function(o) { return document.getElementById(o) || o; } var demo=function() { var x=$id('Vx').value, y=$id('Vy').value, a=$id('a').value, t=$id('t').value; shoot(x,y,a,t); } var shoot=function(x,y,a,t) { if(i) {alert(1);clearInterval(i)}; var f=document.getElementById('fall'); var Vx=parseFloat(x), Vy=parseFloat(y), g=parseFloat(a), h=f.offsetTop, Sx=f.offsetLeft, l=0, t=parseInt(t); var i=setInterval(function(){ if(f){ Sx+=Vx*t; l=Sx; Vy+=g*t; h+=Vy*t; if(h>=document.documentElement.offsetHeight-f.offsetHeight) { //底部 h=document.documentElement.offsetHeight-f.offsetHeight; Vx=(Math.abs(Vx)-0.1 < 0) ? 0 : Vx/Math.abs(Vx) * (Math.abs(Vx)-0.1) //摩擦消耗x速度 Vy=(Math.abs(Vy)-0.8 < 0) ? 0 : -(Math.abs(Vy)-0.8); //撞击消耗y速度 if(Math.abs(Vy)==0 && Math.abs(Vx)==0 ) {clearInterval(i);} //x,y速度为0时，clear } if(l<0 || l>document.documentElement.offsetWidth-f.offsetWidth) { //左右两侧 Sx=(l<0) ? 0 : document.documentElement.offsetWidth-f.offsetWidth; Vx=(Math.abs(Vx)-0.2 < 0) ? 0 : -Vx/Math.abs(Vx) * (Math.abs(Vx)-0.2) //撞击消耗x速度 } f.style.left=l+'px'; f.style.top=h+'px'; } },t); }; var drag=function(o,e){ //拖曳位置，与运动模拟无关 var e = e ? e : window.event; if(!window.event) {e.preventDefault();} 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>

对于这个运动的模拟，我觉得以后倒是可以扩展出一些挺有趣的交互游戏的模拟。比如，射击啊，驾驶啊等等，当然纯属娱乐啦。

标签：抛物线, 摩擦运动, 碰撞运动, 自由落体, 运动模拟, 运动轨迹
发布在 Javascript | 3 条评论 »

google suggestion效果的键盘鼠标事件

2010年08月23号，星期一

google的suggestion功能是一个非常棒的用户体验创新，相信你之前也已经使用过了。不过由于某些原因，国内现在却不能使用这个功能了。
不过,你还可以在baidu上使用相同的功能。对于好点子好创意，模仿学习并不是件坏事。

以下demo，我抛弃suggestion的核心ajax，只是做一下鼠标键盘事件的演示。

<!doctype html> <html> <head> <meta charset='UTF-8' /> <style type='text/css'> .sugg{position:relative;font-size:12px;} .sugg a{text-decoration:none;} .sugg .text{width:210px;height:18px;padding:3px;color:#474747;border:1px solid #ADCAD8;} #suggestion{display:none;position:absolute;top:26px;left:0;width:216px;border:1px solid #3890d0;border-top:0;background:#fff;} #suggestion a{display:block;height:25px;line-height:25px;padding:0 5px;color:#000;} #suggestion a img{vertical-align:middle;} #suggestion #hover{background:#378ece;color:#fff;} </style> </head> <body> <div class='sugg'> <form id='suggF' action="http://www.baidu.com/baidu" onsubmit="document.charset='GBK';sug.hide()" accept-charset='GBK' target="_blank"> <input class='text' type=text name=wd autocomplete="off" onkeydown="pressKey(this,event)" /> <input id='sub' type="submit" value="搜索" /> </form> <div id='suggestion'> <a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">思思</a> <a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">芊芊</a> <a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">cssass</a> <a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">敏敏</a> <a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">黎黎</a> </div> </div> suggestion显示之后，使用方向键或鼠标进行选择。 </body> <script type='text/javascript'> var $id=function(o){ return document.getElementById(o) || o; } var pressKey=function(o,e){ var e = e ? e : window.event; var k = e.keyCode; switch(k){ case 9 : //tab键 case 13 : return false; //回车键 default : sug.show(o,k); break; } } var sug={ show:function(o,k){ /* 此时动态读取suggestion数据（略）*/ document.getElementById('suggestion').style.display='block'; document.onclick=function(){sug.hide()}; if (k != 38 && k != 40 && k != 39 && k != 37) { //非方向键 sug.i = -1; } sug.i = sug.i || 0; var list = $id('suggestion').getElementsByTagName("a"); var prev = ''; switch(k){ case 38: sug.clear(); if (sug.i < 1) { sug.i = list.length } sug.i--; list[sug.i].id = "hover"; o.value = list[sug.i].innerHTML; return false; case 40: sug.clear(); if (sug.i == list.length - 1) { sug.i = -1 } sug.i++; list[sug.i].id = "hover"; o.value = list[sug.i].innerHTML; return false; default : break; } sug.hover=function(othis){ //鼠标划过 sug.clear(); for(i=0;i<list.length;i++){ if(othis==list[i]){ sug.i=i; list[sug.i].id="hover"; o.value = othis.innerHTML; return ; } } } sug.clear=function(){ prev = $id('hover'); if (prev) prev.id = ''; } sug.select=function(){ //鼠标选中 document.charset='GBK'; $id('suggF').submit(); } }, hide:function(){ $id('suggestion').style.display='none'; } }; </script> </html>

标签：suggestion, 键盘事件
发布在 Javascript | 一条评论 »

volume滑动块——html5中input type=’range’的模拟

2010年08月13号，星期五

为了面向web application，html5在elements上做了很多增强。包括新增了很多元素，如progress，datagrid，video等等，也如包括对input等一些元素做了扩展。
input元素的type做了扩展，type=”range”便是其一。

直接看效果(chrome/safari/opera支持)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> HTML5 input元素type=range </title> </head> <body> <input id="range" type="range" min="5" max="25" value="5" onchange="change()"> <span id="value">5</span> <script type='text/javascript'> function change() { var value = document.getElementById('range').value ; document.getElementById('value').innerHTML = value; } </script> </body> </html>

作为一个调节量值的滑动块，在未来的应用当中将会很使用的很频繁。

在html5时代还为真正来临时，我们还必须照顾到那些老浏览器。
所以用js模拟一个。(也很简单，使用图片的话，模拟起来就像了。)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> js滑块 </title> <style type='text/css'> #range2{position:relative;width:148px;height:2px;font-size:0;line-height:0;background:#eee;border:1px inset #9C9B97} #mea{position:absolute;top:-5px;left:0;width:2px;height:10px;border:3px solid #fff;border-top:13px solid #3f8e55;} </style> </head> <body> <div id='range2'> <div id='mea' onmousedown="change2(this,event)" ></div> </div> <br /> <span id="value2">5</span> <script type='text/javascript'> function change2(o,e){ var e = e ? e : window.event; if(!window.event) {e.preventDefault();} var tX=o.offsetLeft, dx=e.clientX; document.onmousemove=function(e){ var e = e ? e : window.event; var len=tX+e.clientX-dx; if(len>=0 && len<=140){ o.style.left=len+"px"; document.getElementById('value2').innerHTML =5 + Math.round(len/7); } } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } </script> </body> </html>

附加一个新效果:两个滑块确定一个区间范围。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> js双滑块区间 </title> <style type='text/css'> #range{position:relative;width:148px;height:2px;font-size:0;line-height:0;background:#fff;border:1px inset #9C9B97} #meaBox{position:absolute;width:148px;height:4px;background:#ccc;top:-2px;border:1px inset #9C9B97;border-left:0;border-right:0;} .mea{position:absolute;top:-5px;width:2px;height:10px;border:3px solid #fff;border-top:13px solid #3f8e55;} #mea_l{left:0;} #mea_r{right:0;border-top:13px solid #ff0000;} </style> </head> <body> <div id='range'> <div id='meaBox' onmousedown="change(this,event)"> </div> <div id='mea_l' class='mea' onmousedown="change(this,event)" ></div> <div id='mea_r' class='mea' onmousedown="change(this,event)" ></div> </div> <script type='text/javascript'> var $id=function(o){return document.getElementById(o) || o;} var change=function(o,e){ var e = e ? e : window.event; if(!window.event) {e.preventDefault();} var init={ mX: o.offsetLeft, lX: $id('mea_l').offsetLeft, rX: $id('mea_r').offsetLeft, dX: e.clientX }; document.onmousemove=function(e){ var e = e ? e : window.event; var dist=e.clientX-init.dX, len=init.mX + dist, l_x=init.lX, r_x=init.rX; switch ($id(o).id){ case 'mea_l': l_x=init.lX + dist; move(); break; case 'mea_r': r_x=init.rX + dist; move(); break; case 'meaBox': l_x=init.lX + dist; r_x=init.rX + dist; move2(); break; default: break; } function move(){ if(r_x > l_x + 20 && len>=0 && len<=140 ) { o.style.left=len+"px"; $id('meaBox').style.left= l_x + 'px'; $id('meaBox').style.width=r_x - l_x + 'px'; } }; function move2(){ if(l_x>=0 && r_x <=140 ) { o.style.left=len+"px"; $id('mea_l').style.left= l_x + "px"; $id('mea_r').style.left= r_x +"px"; } }; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } </script> </body> </html>

标签：html5, range
发布在 Html, Javascript | 没有评论 »

offsetX/Y for Firefox

2010年07月29号，星期四

现在的相册大多有这个功能，鼠标点在照片的左边，可以跳到上一张，点到右边则跳到下一张。
这就需要一个坐标点的计算：(鼠标相对图片的位置) 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/滑动效果。

2010年05月21号，星期五

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