10 2011 档案

Selection对象
摘要：简介Selection是window.getSelection()或其他方法返回的对象。它表示选中的文本区域，当用户在页面上选择一段文本时，它很可能会跨越多个元素。关于可编辑元素的text selection，可以查看Input，Textarea和 document.activeElement，这些元素都会返回the parent object returned from window.getSelection()。Selection 表现为一组 Range 对象，第一个 Range 对象在组中的索引为0，以此类推。 Selection 中的所有成员以 Range 对象上的操作方式定义，这些操 阅读全文
posted @ 2011-10-31 18:14 越己 阅读(2221) 评论(1) 推荐(1) 编辑
[粒子特效]吹散
摘要：原例：传送门很久以前的例子了，现在重新学习粒子效果，练练手也好。其实这里最有技术含量的是粒子的运动算法，至于setPixel之类的东西实在没什么好说的。例一粒子从图片的右边开始吹散，渐渐扩散到左边，运动轨迹是直线。从程序的角度来看，每个粒子有自己的速度，比如最右边的速度为10，那么最左边为-50，速度大于0才让粒子运动，于是右边的粒子最先动，通过加速度的控制，慢慢的让左边的粒子运动。再仔细看，右边的粒子初始速度很小，速度慢慢变快，一般来说，这种初始速度会保持在[0, 1]之间。来看个公式：speed = range * Math.random() - (width - x);speed表示粒子 阅读全文
posted @ 2011-10-29 16:24 越己 阅读(503) 评论(2) 推荐(0) 编辑
[翻译]增强版setTimeout() / setInterval()
摘要：更新（2011/07/09）Firefox 5实现mozRequestAnimationFrame 但没有mozCancelRequestAnimationFrame，为了确保下面的函数正常运行，代码进行了调整，强制Firefox使用setTimeout/setInterval，直到mozCancelRequestAnimationFrame可用为止。更新（2011/06/04）修正了函数，so that they can be cancelled with drop in replace functions for clearTimeout() & clearInterval()。= 阅读全文
posted @ 2011-10-23 17:16 越己 阅读(767) 评论(0) 推荐(0) 编辑
博客代码运行框 开发实录
摘要：在博客园写博客，贴得出代码却看不到效果，需要用户复制到本地文件去运行，这样的阅读体验很差，所以我决定开发一个代码运行框，进一步提升用户体验。需要的控件有<textarea>和<button><textarea>：用于输入HTML代码<button>：点击后弹出浮层，展现运行结果这个运行框组件的HTML结构为:<div id="code_box"> <textarea></textarea> <button>运行</button></div><div 阅读全文
posted @ 2011-10-19 15:03 越己 阅读(602) 评论(0) 推荐(0) 编辑
截断显示长字符串
摘要：传说有个很长的标题 “#%*……&#什么东西1234abcd 还不够长9876 efgh 好了就这样吧” ，标题有多长往往是不可预期的，比如日志的标题，用户还真有这么变态的，当然我们显示的时候，根据设计，不可能有多长显示多长，太长了屏幕也不够啊。这个需求涉及到获取string的长度和截取某个长度搜了下相关资料，发现有人这么判断是否为双字节字符：if(str.charCodeAt(i) & 0xff00) != 0){ //双字节}charCodeAt()用于获取指定位置字符的 Unicode 编码；0xff00是 “1111 1111 0000 0000” 的十六进制表示法；& 阅读全文
posted @ 2011-10-13 23:00 越己 阅读(1130) 评论(3) 推荐(0) 编辑
追忆Jobs
摘要：不记得是何时听过jobs这个名字，有印象的是大学时期，小皮经常跟我说到apple，聊到jobs，这个人，被他奉为偶像。渐渐的，我也开始熟悉jobs，熟悉他的生平，熟悉他的产品，我突然发现我和他似乎很像，那就是对完美的追求。辉煌的过去，无需我再去赘述，如果我们细数他的经典，会嫉妒他的成就，为什么人生可以如此耀眼，可是人不是很渺小的吗？人是很渺小的，可是人的心却可以超越想象，当你的梦想立足于改变世界，这个世界就正在为你改变，看看今天的Microsoft，Google，Apple，Facebook，在人类历史上，这些名字都将铭刻于光荣柱，永远闪耀着光芒。每年的全球开发者大会都是jobs的个人秀，每当 阅读全文
posted @ 2011-10-06 15:00 越己 阅读(191) 评论(0) 推荐(0) 编辑
让表单不再乱跳
摘要：为什么会有这个需求呢？因为表单是需要验证的，如果你的表单不需要验证，且只有一个输入框，这篇文章你可以无视了，比如谷哥和度娘的首页就木有这种需求。来说说验证的情况，这需求太普遍了，比如验证两次输入的密码是否一样，用户名是否包含非法字符等，如果不验证表单，这些非法数据就直接提交到服务器了。<input type="submit"/>的click事件和form的submit事件提交表单的最后一步是表单的submit事件，如果有<input type="submit"/>，那它的click事件也会触发，触发顺序是click -> s 阅读全文
posted @ 2011-10-03 18:20 越己 阅读(3325) 评论(44) 推荐(1) 编辑
文字特效
摘要：本文仅作抛砖引玉，实现一个文字凸起效果，因为我特别喜欢这种效果。首先，需要一个很粗的大号字体很自然想到font-weight: bold/bolder，但是你会发现，就算写成font-weight:900，也没多粗。那么大号字体怎么做呢，那就font-size吧font-family:'微软雅黑';font-weight:900;font-size:100px;貌似加粗还不如加大给力，先这样吧，懒得删了接着调下颜色，例子中是#99999最后是阴影效果，为了看的明显，这次换个背景色，因为阴影多是黑白形成的，背景就用浅蓝色。font-family:'微软雅黑';fo 阅读全文
posted @ 2011-10-02 16:56 越己 阅读(287) 评论(1) 推荐(0) 编辑
CSS3技巧 —— 渐变
摘要：CSS渐变在Webkit率先得到实现，现在Firefox 3.6+也支持了，来看下各个浏览器如何实现CSS渐变效果。Webkit下面这行代码可用于Chrome, Safari等，它能实现线性渐变，从top(#ccc)渐变到bottom(#000)。background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));Firefox 3.6+background: -moz-linear-gradient(top, #ccc, #000);IEIE这个垃圾需要使用滤镜filter: progid:D.. 阅读全文
posted @ 2011-10-01 15:11 越己 阅读(489) 评论(3) 推荐(0) 编辑
CSS3技巧 —— 搜索框
摘要：这种类型的搜索框应该较为常见，设计元素有圆角和内阴影，在CSS2时期通常都是用图片实现的，来看下CSS3的效果，而对于IE6,7这样的悲剧浏览器，也不至于太难看:画圆通过设置一个较大的圆角值就能实现圆形，下面画了一个直径为100的圆。.circle { width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;}内阴影效果box-shadow的第一个值是阴影类型，默认是外阴影，平常我们使用它都不会设置这个值，所以就是外阴影的效果。如果要实现内阴影效果，需要手动设值：inner 。.i 阅读全文
posted @ 2011-10-01 13:51 越己 阅读(1816) 评论(1) 推荐(2) 编辑
CSS3基础
摘要：RGBA前三个值是RGB颜色，最后一个表示透明度（0 = 全透明，1 = 不透明）RGBA可以应用于任何和颜色相关的属性,比如font color, border color, background color, shadow color等等。文字阴影text shadow的结构顺序是这样的：x-offset，y-offset，blur和color如果x-offset是负数，阴影会移到左边。如果y-offset是负数，阴影会移到上面。别忘了，shadow color是可以使用GRBA的哦！你可以设置多个text-shadow，用逗号分隔开就行了。下面的例子使用了两个text-shadow，实现 阅读全文
posted @ 2011-10-01 13:02 越己 阅读(356) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示