使用HTML5、CSS3和jQuery增强网站用户体验[留存]
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验？是不是立刻就想到了flash实现？这彷佛年代久远的事了。使用现在最流行的Web技术HTML5，CSS3和jQuery，同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开发移动版flash的消息，虽然在桌面中我们还拥有大量的flash的应用，但是随着HTML标准的完善，可能flash也要退出历史舞台了。在今天这篇文章中，我们将介绍一些非常实用的教程，技巧和资源来帮助大家构建一个更加丰富的用户界面。请大家给积极我们留言！您的支持是我们的最好的动力！
表单类
这个教程将帮助你构建一个非常动感的checkbox，用来替换缺省的checkbox，相信大家会喜欢更富有活力的UI界面
这是来自Nettus+的超棒教程，将教你如何使用HTML5特性来构建表单
一个alert，对话框等组件的替代品，用户将会更喜欢这种UI元素
一个非常灵活的对话框框架，提供了非常好的用户界面设计，能够帮助你生成非常酷的表单
多层选择下拉框，非常适合树状结构的展现
个人非常喜欢使用的表单美化插件，能够帮助你构建漂亮的UI界面。
非常不错的一款jQUery框架，允许你使用设计的主题将表单转化成非常酷UI。当然你也可以自己自定义一个主题
Uniform将使用自定义的皮肤遮盖缺省的表单，并且可以和你实际的表单元素同步，保证了访问和兼容
image buttons a part of input fields
教你如何生成输入框中的按钮
非常不错的WP插件，能够生成一个停靠页边的联系人表单，不使用的时候自动隐藏
jQuery高亮显示功能，能够让输入高亮，提示用户输入内容
个人非常喜欢使用的表单输入验证插件，具体使用参考这篇文章：
使用jQuery插件jquery.validationEngine实现表单验证功能
导航类
这个jQuery开发的导航菜单让人想起了flash开发的菜单效果，整个移动如此的顺畅，让你感觉它就是flash开发的。 兼容所有的浏览器，即使javascript被关闭也可以正常工作。
如果你想开发一个多层的属性菜单，那么这个插件就是你要找的解决方法之一。
一个非常不错的滑动面板，非常适合滑动类型面板的应用。 并且可以使用高级特性增强功能
如果考虑扩展性，这个插件恐怕是你能找到的最好的面板导航标签页插件了。
Smooth horizontal sliding menu
这个教程教你如何使用jQuery来创建一个垂直滑动显示的子菜单
这个可以缩放的当前位置可以自动根据当前位置长度来缩放，非常不错的创意
非常动感的一个导航实现， 能够给你的链接添加一个花朵的效果
一个使用非常简单的手风琴显示效果
用户界面类
Slide node是一个可以帮助你提供一些有效提示或者信息从而方便你访问用户使用网站的插件。
一个非常酷的显示广告的插件。
jQuery的无限滚动效果插件，用来帮助你现实大幅的内容
一个动态垂直滑动显示导航菜单的插件
一个非常酷的插件允许你添加提示到你的网站。当然提供了可选的皮肤。
一个能够让你的网站背景幻灯显示的插件
不是一个简单的图片幻灯插件，它能够让你指定一个目录，这个目录下的所有图片都能够显示，不需要你在HTML代码中指定，非常实用！
一个可以帮助你控制每个单独字母的插件。 帮助你有效的创建一些独特的文字效果
这个插件允许你添加链接来修改页面的样式表
Flip是一个帮助你实现翻动元素效果的jQuery插件。
使用HTML5、CSS3和jQuery增强网站用户体验[留存]的更多相关文章
- Html5+css3+angularjs+jquery+webAPi 开发手机web（一）
前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...
- 真人测试网站用户体验的超棒在线服务 - Peek by UserTesting
闲逛的过程中找到的这个工具网站,它可以帮助你测试你的网站用户体验,而且会发送给你一个5分钟的视频来展示一个实际的用户(不是机器,是人哦)如何操作你的网站的,这个服务目前免费,大家如果有兴趣了解你的网站 ...
- 提升网站用户体验—WebP 图片的高效使用
一.WebP 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...
- CSS3新特性应用之用户体验
一.光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可. 完整代码: curosr: u ...
- 使用 HTML5 History 新特性增强 Ajax 的体验(转)
一. 场景再现 如大家熟知,Ajax 可以实现页面的无刷新操作,但会造成两个与普通页面操作(有刷新地改变页面)有着明显差别的问题—— URL 没有修改以及无法使用前进.后退按钮.例如常见的 Ajax ...
- Chrome发布73 beta版：增强Linux用户体验
Google开发者周五推动Chrome 73进入他们的测试频道,因为他们准备在3月12日左右推出这款网页浏览器更新,以便稳定推出.除非另有说明,否则下面描述的更改适用于Android,Chrome O ...
- Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十三】
<Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- 12个新潮的 HTML5 & CSS3 网站设计欣赏
响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天, ...
随机推荐
- 周总结<6>
周次 学习时间 新编写代码行数 博客量(篇) 学到知识点 13 10 100 2 网页设计:邻接矩阵深度以及广度遍历
- 有关rand()，srand()产生随机数学习总结
看到夏雪冬日的有关rand()和srand()产生随机数的总结,挺好的,学习了,然后又有百度其他人的成果,系统总结一下.本文转自夏雪冬日:http://www.cnblogs.com/heyongga ...
- ASLR/DEP绕过技术概览
在经典的栈溢出模型中,通过覆盖函数的返回地址来达到控制程序执行流程(EIP寄存器),通常将返回地址覆盖为0x7FFA4512,这个地址是一条JMP ESP指令,在函数返回时就会跳转到这个地址去执行,也 ...
- ElasticSearch API 简要介绍
调用其API会返回很多信息,例如集群的信息,节点的信息等 检查集群的状态----Restful API说明 1:检查集群状态信息 2:管理集群 3:执行 增删改查 命令 4:执行高级命令 Restfu ...
- Linux的压缩/解压缩文件处理 zip & unzip
Linux的压缩/解压缩命令详解及实例 压缩服务器上当前目录的内容为xxx.zip文件 zip -r xxx.zip ./* 解压zip文件到当前目录 unzip filename.zip 另:有些服 ...
- php自带的filter过滤函数
PHP 过滤器用于对来自非安全来源的数据(比如用户输入)进行验证和过滤. filter_has_var()检查是否存在指定输入类型的变量. filter_id()返回指定过滤器的 ID 号. filt ...
- 【C++】构造函数不能是虚函数
1 虚函数对应一个vtable,这大家都知道,可是这个vtable其实是存储在对象的内存空间的.问题出来了,如果构造函数是虚的,就需要通过 vtable来调用,可是对象还没有实例化,也就是内存空间还没 ...
- mvc4中使用angularjs实现一个投票系统
数据库是用EF操作,数据表都很简单中,从代码中也能猜出表的结构,所以关于数据库表就不列出了 投票系统实现还是比较简单,投票部分使用ajax实现,评论部分是使用angularjs实现,并且页面每隔几秒( ...
- 【数据库】SQL分组多列统计(GROUP BY后按条件分列统计)
select whbmbh ,zt,1 as tjsl from fyxx group by zt,whbmbh select whbmbh,sum(case zt when '有效' then 1 ...
- 用PS做PNG格式底色是透明的logo
有时我们需要底色为透明色的logo图片,但是一般的图片底色都是白色的,覆盖在其它图片上会显示白色. 本文介绍如何用PS CS6制作透明底色的图片. 1.首先我们确定所选图片的大小(即分辨率大小),在资 ...