上一页 1 ··· 3 4 5 6 7 8 下一页
2011年10月3日
让表单不再乱跳
摘要： 为什么会有这个需求呢？因为表单是需要验证的，如果你的表单不需要验证，且只有一个输入框，这篇文章你可以无视了，比如谷哥和度娘的首页就木有这种需求。来说说验证的情况，这需求太普遍了，比如验证两次输入的密码是否一样，用户名是否包含非法字符等，如果不验证表单，这些非法数据就直接提交到服务器了。<input type="submit"/>的click事件和form的submit事件提交表单的最后一步是表单的submit事件，如果有<input type="submit"/>，那它的click事件也会触发，触发顺序是click -> s 阅读全文
posted @ 2011-10-03 18:20 越己 阅读(3322) 评论(44) 推荐(1) 编辑
2011年10月2日
文字特效
摘要： 本文仅作抛砖引玉，实现一个文字凸起效果，因为我特别喜欢这种效果。首先，需要一个很粗的大号字体很自然想到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 越己 阅读(285) 评论(1) 推荐(0) 编辑
2011年10月1日
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 越己 阅读(472) 评论(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 越己 阅读(1798) 评论(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 越己 阅读(352) 评论(0) 推荐(0) 编辑
2011年9月30日
[翻译]使用requestAnimationFrame实现炫目的动画
摘要： 写缓动函数用到requestAnimationFrame函数，之前了解过一些，但总觉得又不是很了解，所以翻译一篇老外的文章，以便学习分享。requestAnimationFrame是什么？以前我们做动画需要一个定时器，每间隔多少毫秒就做出一些改变。现在有个好消息：浏览器厂商已经决定提供一个专门做动画的方法，即requestAnimationFrame()，而且基于浏览器的层面也能更好的进行优化。但是呢，这只是一个做动画的基础API，即不基于DOM元素的style变化，也不基于canvas，或者WebGL。所以，具体的动画细节需要我们自己写。我们为什么要用它？对于同时进行的n个动画，浏览器能够进 阅读全文
posted @ 2011-09-30 16:42 越己 阅读(4734) 评论(13) 推荐(3) 编辑
2011年9月29日
说好的缓动呢？
摘要： jQuery的缓动函数不给力，被逼自己写一个，既然要写，先把需求列好：1. 动画类型有：linear, easeIn, easeOut,easeInOut2. 可以在缓动过程中改变属性，也可以是调用函数，并改变函数的参数（后者是我的初衷，jq只支持属性，见当0碰上0）动画是怎样产生的？学过Flash的人应该知道帧，帧就是一个画面，通常一秒25帧，也就一秒播放25个画面，如此快速的放过去，静态也成了动态（当然，前提是25个画面不是同一个画面，囧。。。）难道做动画要画N多图，好吧，这叫“逐帧动画”，如果你很闲大可以这么干，因为这样做的效果绝对是顶级的，毫无瑕疵的。但是我一点都不闲，我画画的水平连幼 阅读全文
posted @ 2011-09-29 01:12 越己 阅读(2943) 评论(33) 推荐(10) 编辑
2011年9月28日
当0遇上0，拼人品的时候到了
摘要： 话说取值习惯用a||b，当0遇上0，这句话就是一句废话！我的问题是这样的：首先页面有滚动条，滚动条位于初始位置（最顶上），然后我点击一个按钮，缓动到底部，这个时候，就会发生见鬼的0与0的对决。//jQuery代码function toBottom(){ var el = null, scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight), clientHeight = Math.min(document.documentElement.clientHeight, do.. 阅读全文
posted @ 2011-09-28 01:09 越己 阅读(2834) 评论(15) 推荐(0) 编辑
2011年9月25日
仿微博半透明边框
摘要： <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> body { background:blue; } #box { width:300px; padding:5px; position:relative; } #alpha_bg { background:#f2f2f2; width:10 阅读全文
posted @ 2011-09-25 11:25 越己 阅读(1505) 评论(1) 推荐(0) 编辑
2011年9月13日
getBoundingClientRect()方法
摘要： 原来只知道是获取元素的位置信息的，今天测试了一个功能，发现不是这么简单，见例子<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> #null { height:1300px; } #bottom { background:lightblue; height:100px; } </sty 阅读全文
posted @ 2011-09-13 15:03 越己 阅读(671) 评论(0) 推荐(0) 编辑
上一页 1 ··· 3 4 5 6 7 8 下一页