代码改变世界

关于FF在使用dispathEvent的时候无法触发input[type=file]click事件

2011-12-22 10:35 by Matin, 292 阅读, 0 推荐, 收藏, 编辑
摘要:可以和IE一样,绕道使用flie.click来实现; 阅读全文

input类型为file时,chrome,FF和IE8的fakepath问题处理方法

2011-08-31 16:11 by Matin, 8639 阅读, 0 推荐, 收藏, 编辑
摘要:在处理表单的时候,如果input类型为file时,FF,chrome,IE8获取文件时,或获取到一个fakepath,而不是真正的文件地址;不过ie6,ie7却可以获取,在IE8之后,安全级别提高了。但是,当出现一个客户端图片预览这样的需求的时候,对于不同浏览器就要采用不用的策略了;IE,可以使用滤镜,chrome等可以使用HTML5的方式,具体如下: <img id="file_img"... 阅读全文

JS按位非(~)运算符与~~运算符的理解

2011-07-29 13:28 by Matin, 457 阅读, 0 推荐, 收藏, 编辑
摘要:按位非运算符,简单的理解就是改变运算数的符号并减去1,当然,这是只是简单的理解能转换成number类型的数据;那么,对于typeof var!==”number”的类型来说,进行运算时,会尝试转化成32位整形数据,如果无法转换成整形数据,就转换为NaN; JS在位运算上用了更简便的一种方法来实现这中运算,那么它的实现原理大致上可以这样理解: var testData=-2.9; var testR... 阅读全文

纯css无图片的边框圆角实现原理

2011-06-08 15:05 by Matin, 611 阅读, 0 推荐, 收藏, 编辑
摘要:可以看到,不论采用图片实现圆角,还是各种“曲线救国”的圆角实现,在css3里面,都可以用一个border-radius全盘搞定,然而,因为border-radius属性仅仅少数几个新锐浏览器支持(比如FF4,IE9,CHROME等),当前使用的较多的可能还是用图片模拟,现在介绍一种不使用图片来实现圆角的方法,当然,这种方法对于像素的精确度要求较高,具体思路如下: 首先,圆角的生成类似一个金字塔,我... 阅读全文

jQuery.is方法 VS matchesSelector

2011-05-19 15:40 by Matin, 1200 阅读, 0 推荐, 收藏, 编辑
摘要:matchesSelctor方法已经被FF/safari(每次都打错这个词- -)/chrome等浏览器支持,其作用是匹配一个给定字符串selector,如果匹配成功,返回true,否则,返回false; SELECTORS API LEVEL 2提供的接口: 这个方法常用于事件委托等等当中;不过,并不是所有的浏览器都支持这个方法,而且每个浏览器的实现方式也不一样;为此,需要一个兼容性的方案;比如... 阅读全文

再谈querySelector和querySelectorAll

2011-05-13 11:28 by Matin, 921 阅读, 1 推荐, 收藏, 编辑
摘要:先按W3C的规范来说这两个方法应该返回的内容吧:querySelector: return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null.(返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返... 阅读全文

幻灯片效果及原理

2011-04-26 17:56 by Matin, 1078 阅读, 1 推荐, 收藏, 编辑
摘要:主要采用绝对定位的方法来实现,假设有10个元素要加入这个效果中;比如:点击按钮4,那么第4个张幻灯就要显示;分为curNum(当前的这张)和prevNum(前一张),通过比较curNum和prevNum的值来判断prevNum所对应的幻灯的定位,以便决定下一次它如何显示,而curNum和prevNum是通过对元素设定自定义属性得到;假设现在显示框现在显示的是第4张,而你想看第8张,点击了8,那么curNum=8,prevNum=4,因为prevNum<curNum,所以它被定位到显示框的左边,同时,把curNum赋值给prevNum,以便下一次判断;反之,如果prevNum>cur 阅读全文

[js]网页侧边随页面滚动广告效果实现

2011-04-14 14:02 by Matin, 803 阅读, 0 推荐, 收藏, 编辑
摘要:其实这个效果不是什么难实现的效果,关键注意几个地方就可以了;a.scrollTop的计算;b.滚动元素的定位值计算;c.滚动周期设定;代码如下:css部分:/*测试用的高度*/body{ height:3000px;}div,ul,li,body{margin:0; padding:0;}/*position:absolute;用于元素的定位*/#roll{width:50px; height:100px; background:#99CC00; position:absolute;}Html代码:<body><div id="roll"></ 阅读全文

[css]Vertical-align详解及实际应用

2011-04-13 17:42 by Matin, 1149 阅读, 0 推荐, 收藏, 编辑
摘要:vertical-align这个属性,按照规范的说法: This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. 该属性决定一个行内元素产生的框在一个线框内垂直方向的位置。 它有以下的几个属性可选:baseline | sub... 阅读全文

[css]css之浮动与清除浮动各方法原理介绍

2011-04-12 17:26 by Matin, 773 阅读, 1 推荐, 收藏, 编辑
摘要:浮动,显然是css运用的非常广泛的属性之一,然而,Float(浮动)概念却也成为CSS中最让人迷惑的一个概念。它经常被错误理解而由此带来的可读性、可用性问题备受诟病,但是,到底是因为Float自身的问题还是我们使用者对这个属性的误解而产生如此之多的对这个属性的指责,下面有几篇文章关于float的,(中文翻译过些时候会放上来,现在还差一点点没有完成,E文Ok的最好了,^^);a.[Containi... 阅读全文