DEMO资源导航

开发摘要

汇集整理web前端开发资源,提高web前端开发效率.

欢迎交流

Mail:web_zhoucun#126.com

Msn:web_zhoucun#live.cn

QQ:244851119

其他链接

xhtml实例

无缝滚动

top

不间断向上滚动,实现元素的首尾无缝滚动.需要注意的是父级容器比子容器小时才能实现滚动.
不间断向左滚动,实现元素的首尾无缝滚动.需要注意的是父级容器比子容器小时才能实现滚动.

html其他应用

top

用html代码写的箭头

html标签

top

html文档中meta标签的使用说明
css实例

表单美化

top

非常漂亮的WEB表单样式.美化样式内容包括text,radio,checkbook,textarea,submit
Youku搜索条样式
由于FIREFOX对文件域的值只为当前选择的文件的文件名而不是文件的绝对路径,因此对于图片预览区域的图片无法显示。此实例只兼容ie浏览器。
当限定select的宽度时,其中的Option也被限定了宽度,这一情况对于长度较长的Option则不能显示全部内容,此dome很好的解决了这个问题
select样式美化,htc文件只能被IE内核支持。

列表结构

top

UL自动换行列表,主要实现功能是保持li结构中内容的完整性,避免随父级容器的宽度改变而发生li内容块的错位.

图文排版

top

Css图文横向排版适合图片,标题,简述等格式的简单排版需求.
Css图文纵向排版可以通过控制父级元素的宽度来调整排版布局,有较高的扩展性和灵活性.

元素对齐

top

通过控制vBasic的高度和vCont的垂直对齐方式解决div的垂直对齐问题,设置vertical-align:middle;时vCont元素垂直居中对齐,设置vertical-align:bottom;为vCont元素垂直底部对齐,*property是一个只有IE(包括IE7)才能解析的hack,使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。

鼠标效果

top

简单的一个css美化a链接的title的效果。多个应用会出现提示层的层级问题,a元素的提示元素中建议是文本图片等简单的表现形式。
tip提示的实例
仿QQ邮箱弹出层效果
javascript实例

Jquery实例

top

jqery选择器实例

js图片展示

top

JS图片展示
JS图片展示2
JS图片展示3

其他效果

top

JS随机颜色
通过js的location.href获取地址栏的关键词,如index,about等判断页面位置。
return 是javascript里函数返回值的关键字,一个函数内处理的结果可以使用return 返回,这样在调用函数的地方就可以用变量接收返回结果。
使用substring函数反转一个输入的字符串。
JavaScript的switch语句查找地址栏参数。如果在地址栏中找到switch则提示在找到了switch,没找到则提示没找到switch。这种方法可以用来判断导航的当前位置。
JavaScript for in循环的使用
JavaScript中使用continue取出1到10之间的奇数
continue控制while循环条件