实验室

　　声明：以下demo并非完全原创，不代表个人技术，仅闲暇空余玩玩而已，仅此而已~！＾_＾!

Html

  • HTML 5 Forms Demo

    　　输入框自动获取焦点、文本框的输入提示、强大的表单验证功能、有趣的input type=”range”、input type=”number”、输入框下拉提示、还有默认的日期选择。

  • 纯css3实现酷炫网站图标

    　　所有的例子使用简单、语义的HTML。无空元素，无不必要的额外的元素，无JavaScript，无图像。请使用支持css3的浏览器查看，Opear10目前还不支持背景渐变。

  • 固定盒子宽高水平及垂直方向居中

    　　记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。

  • 宽度自适应的input和textarea

    　　这两个表单元素十分常用，由于其在各浏览器下表现略有不同，我们很难把握好宽度的设置，更别说宽度自适应100%啦。利用hack解决问题比较的不心安，通过下面方法可以很好的实现且跨浏览器兼容。

  • css Shadow

    　　css3的一些东西，配合一些IE only 的滤镜，实现的阴影效果。代码比较简单咧！

  • 高度自适应的页面

    　　有参考嗷嗷的部分，但是表现层(css)与其有比较大的差别，代码本身可能还存在一些问题，但还是能凑合着用，兼容性测试通过IE6、IE7、FF2、FF3(其他浏览器还有待测试，家里的电脑就装了这些)。目前没使用任何hack。

  • 利用css实现多列等高

    　　任意多列，列中可以有任意个容器。比较好用吧！与js实现的相比较，缺陷就是需要设定一个最大高度，万一超出。内容会被hidden。貌似没其他大的问题(小问题能容忍就该容忍，没有绝对的十全十美)。

  • 固定右栏宽度, 左栏自适应宽度

    　　这个东西很简单，光看题目就够了。如果直接使用，可能还需要再改进改进哦~！

  • 中栏宽度固定且居中，两侧边栏宽度相等且自适应

    　　中栏的宽度固定，两边栏自适应窗口宽度且相等。改变窗口大小或改变显示器分辨率可看到效果。代码很简单，稍转点弯就是了！

  • 不规则形状导航

    　　这样的导航看起来挺复杂，做起来其实挺简单，只是IE6要用到滤镜来确保PNG的透明。万恶的IE6啊！

  • 跨浏览器实现inline-block

    　　inline-block，要是个主流浏览器都能很好的支持他，确实是一个很好的东东，至少可以避免float所带来的麻烦。这里利用一些hack或私有属性来解决各浏览器的兼容问题。

JS

  • imglazyload图片延迟加载

    　　原理简单不过了，图片先不设置src属性，浏览器就不会产生请求，监听起滚动条和窗口大小的事件，通过判断图片是否处于当前可视区域(offset的left和top方向分别小于scrollTop+clientHeight和scrollLeft+clientWidth)来控制图片是否显示，显示则设置img对象的src属性为标签中自定义属性的值···

  • jQuery实现dialog(对话框)

    　　话说系统默认的对话框使用方便，但是功能单一且比较的难看(不能自定义样式)，那么自己来写代码扩展一些更复杂的功能并美化一下。本代码采用面向对象思想对一些属性和方法进行了封装···

  • 基于jQuery实现轮换的选项卡

    　　想写个这样的东西很久了，恰巧项目中要用到，就下了点功夫。利用模拟鼠标事件来做轮换···

  • 基于jQuery实现星级评分效果

    　　仿照『口碑』的评星级效果做的一点小东西，测试下自己这段时间的学习成果···

  • 美化“丑陋”的Select

    　　这个小东东折磨了我足足一天。工作上要用到，原本也在网上用过类似代码，考虑到老代码的效率问题，只有自己再花点精力咯！blog文章里就说过，又一点仿tudou，但绝非复制品。

这篇文章发表于2009年十一月16日 下午 12:09，并被分类于。您可以通过订阅RSS 2.0跟踪对这篇文章的评论， 双方的留言和pings目前处于关闭状态。