一个弹出框，圆角，带阴影，还半透明的阴影，那么，你肯定会想到用png了，是的，ie下，大家别无他法。 一般会这样来做 <div id=”box” style=”背景图片，if==ie6（加滤镜）”> <div id=”boxcenter” style=””>这里是弹出框的内容</div> </div> ok,一个漂亮的圆角阴影半透明的弹出框出来了，但是，在ie6下面，你会发现这个弹出框只可远观而不可亵玩， 你 里面的按钮啊什么的都无法捕捉到你的鼠标事件，杯具发生了。你在里面的按钮啊什么的都用不了。为什么？ 这个，真的很难说，归咎于ie6的私有滤镜了，但是，如果你的png图片，在boxcenter的位置 切空了，也就是 你的png是个只有边框的图片的话，那么加了滤镜后，的png透明处都是可以使用的。 切记一点，背景图片的png加了滤镜后，这个element内部只有在png的透明位置才能响应你的鼠标，其他地方 都被滤镜屏蔽掉了！！！！！ 万恶的ie6！！！！！！！！！！！
Category > Javascript
用canvas写了个简单的写字板
用canvas写了个超级简单的写字板 <html> <head> <title>Canvas tutorial</title> <style type=”text/css”> body {margin:0px;padding:0px;} canvas { border: 1px solid black; position:absolute;top:170px;left:300px;margin:0px;padding:0px;} </style> </head> <body> <canvas id=”tutorial” width=”300″ height=”300″></canvas> <script> function thumbnail(){ this.load = function(){ this.canvas = document.getElementById(‘tutorial’); if (this.canvas.getContext){ this.ctx = this.canvas.getContext(’2d’); } this.ispause=true;//是否暂停绘画，在鼠标按键松开的时候 this.c_p=getPosition(this.canvas); } } window.onload = function(){ window.thumb = new thumbnail(); thumb.load(); thumb.canvas.onmouseup=function(){ thumb.ispause=true; } thumb.canvas.onmousedown=function(event){ thumb.ispause=false; [...]
在议ie6下面void(0)之出离愤怒
昨天晚上回到家后还跑回公司处理了一个bug，是这样的，我一个按钮，鼠标移动上去，要现实一个浮层，而这个按钮又是可以点击执行相关ajax操作的。简单吧，我就载在这个简单的需求上面了，至于原因，总之我承认我在这个跌过一次的坑上面又跌了一跤，记的去年在139.com的网盘项目组的时候就处理过相关问题还有过< a href=’http://www.nickli.cn/?p=60‘>一篇博文记录</a>来时刻警醒自己，而我又在这个问题上摔跤了. 我偷了个懒，觉着直接用css做了个兼容的浮层很帅，然后，又有个要命的是，我在页面是用<base href>标签，这逼的我在a标签上面只能写<a href=”javascript:void(0)”>,因为如果用<a href=”#”>的话，页面还是会跳到base目录下面去，这很恶心（以后要尽量避免使用base标签了！！！！！！！），总之就是我偷了个懒引来了这个问题——a标签还有个onclick事件侦听，执行玩一个ajax后，在回调函数里面会弹出一个div浮层，而这个浮层上面的三个背景图片一个都不少的全部没出来，这个浮层被裸了！ 那么可能问题就真的出在这里，这里要感谢组里前端<a href=”http://blog.htmlwind.com/“>大师兄</a>帮忙一起耐心调试，我们抓包发现点击按钮后，直到浮层出来，没有发现三个图片的请求发出。那么可以肯定，我们确实没有看过，这个浮层被裸了是因为图片没有回来，而不是以为其他的css的问题，那么为什么会这样呢！ 而我是把onclick换成了onmousedown，这样却发现这个浮层能现实图片了，而偶尔的是会有一张显示不出来。 有位哥们遇到过类似的问题。说几个吃饱了没事干的老外反复试验，发现这是IE6 一个底层机制的bug，说是 <a href=”javascript:void(0)”>或者<a href=#”>这样使用a标签的话并不能阻止a标签最后触发一个什么行为，导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了 那么如果真的是这样，就好理解了，因为我的浮层是有个屏蔽层的，onmousedown后，焦点已经移动 到了屏蔽层上面，a标签的onclick侦听也不在执行，那么这个a标签最后出发的那个什么行为就不会触发了，于是我 的图片就可以正常的请求url了。这个只是我的这个特定的应用场景下面的一个巧合的解决办法。 这个bug一般会出现在这样的情况下面 a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样: 1. <a href=”javascript://” onclick=”dosomething()”>a1</a> 2. <a href=”javascript:void(0)” onclick=”dosomething()”>a2</a> 3. <a href=”###” onclick=”dosomething()”>a3</a> 第三种方法dosomething()中切换图片完全没有问题, 但是href=”###” 却带来了另一个问题, 占用了锚点,页面URL也不美观. 第1,2种方式虽然没有上面的问题, 但会引发IE6的奇怪bug, dosomething()中图片无法加载. 只要在dosomething();后面增加一个return false;就可以解决了. 如果是绑定事件, 同样在function最后增加return false;就行. 唉，希望如果也有碰到这样诡异问题的朋友能看了这里后能有所以收获。
ie6下a标签的void(0)引发的诡异问题 带来的思考
1 <HTML> 2 <HEAD> 3 <TITLE>1.html </TITLE> 4 </HEAD> 5 6 <BODY> 7 <a href=”javascript:void(0)” onclick=”loadiframe()”>点我咯</a> 8 <script> 9 var loadiframe = function(){ 10 var myi=document.createElement(“iframe“); 11 myi.src=“2.html“; 12 document.body.appendChild(myi); 13 } 14 15 </script> 16 </BODY> 17 </HTML> 上面代码保存为1.html <HTML> 2 <HEAD> 3 <TITLE> 2.html </TITLE> 4 </HEAD> 5 6 <BODY> 7 这里是第2.html 8 [...]
用 HTML Canvas 创建一个图片浏览器
HTML 5 引入了新的的网页元素：Canvas 是一片空白的绘图区域，网页开发者可以利用 JavaScript 在该区域中自由地进行 2D 绘图。Canvas 可以用于渲染华丽的网页设计界面。本文通过一个详细的实例来说明如何用 Canvas 来制作一个图片的浏览器。最终的效果可以达到 Flash 程序的效果。通过本文，读者可以了解如何使用 Canvas 的各种函数以及如何与用户事件进行交互，适合读者为 Web 设计和架构师。
Yahoo专家：怎样才能成为优秀的前端工程师
本文翻译自著名的前端工程师Nicolas Zakas的博客。Zakas目前是Yahoo!公司的首席前端工程师，Yahoo首页的负责人，也是YUI库的作者之一。当然，相信大家更熟悉他写的名著《JavaScript高级程序设计》（图灵出版）。
如何面试前端工程师！
近来几个月，一直在努力寻找前端战友，未果，一路的招聘经历下来，心生不少感慨， 一直都很小心翼翼的，怕错失了高人，又更加怕失误把关不够招到不合格的同学进来公司，对公司对项目造成某些影响。
网上看到这篇文章，感觉多少说的 有点上道，就转过来了。
JS事件模型小结
翻出了JS权威指南(V4)又复习了一下JS事件模型，简单作一小结。
JS权威指南中将JS事件模型分为四种
1、原始事件模型:属性事件处理模式
2、标准事件模型:DOM2对其作了标准化
3、IE事件模型(IE5.5\IE6)
4、 Netscape事件模型
*
原始事件模型
也就是基本事件处理，其实我们大多数人使用的JS事件处理模式都是这种代码方式。
其事件类型:分为”输入事件(如onclicki)”和”语义事件(如onsubmit)”
事件程序的注册可以以下几种方式:
xml 和 json 的区别
XML 是一种用于面向服务的体系结构 (SOA) 和数据传输的常见传输。当然，目前许多服务以 SOAP 格式存在。不过，何时将其用于数据传输在 Ajax 社区中存在分岐。 [ XML ] 使用XML作为传输格式的优势： 1. 格式统一, 符合标准 2. 容易与其他系统进行远程交互, 数据共享比较方便 3.调用将 XML 用作传输的现有服务。 4.使用 XSLT 可以动态转换 XML。这是企业服务总线 (ESB) 方案中的理想功能。 缺点: 1. XML文件格式文件庞大, 格式复杂, 传输占用带宽 2. 服务器端和客户端都需要花费大量代码来解析XML, 不论服务器端和客户端代码变的异常复杂和不容易维护 3. 客户端不同浏览器之间解析XML的方式不一致, 需要重复编写很多代码 4. 服务器端和客户端解析XML花费资源和时间 [ JSON ] 那么除了XML格式, 还有没有其他格式, 有一种叫做JSON (JavaScript Object Notation) 的轻量级数据交换格式能够替代XML的工作. 优点: 1. 数据格式比较简单, 易于读写, 格式都是压缩的, [...]
