【教 程】jQuery打造动态下滑菜单

【教 程】jQuery打造动态下滑菜单

本教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。jQuery的”write less, do more”的特性可谓是家喻户晓，即使没有很丰富JS编程经验的人，也可以通过其提供的API很快学会如何使用，当然，如果您经验丰富，我还是建议您可以 理解jQuery各主要函数的实现原理，其他不说了，直接看看如何用它来实现菜单神奇的效果吧。

您可以点击查看演示，也 可以点击下载源代码。

Step1 – HTML结构

看一下菜单的HTML代码，跟平常的菜单代码没有什么区别：

<div id=”menu” class=”menu”>

    <ul>
        <li><a href="javascript:;">Home</a></li>
        <li><a href="javascript:;">HTML/CSS</a></li>
        <li><a href="javascript:;">JavaScript</a></li>
        <li><a href="javascript:;">Resources</a></li>
        <li><a href="javascript:;">Tutorials</a></li>
        <li><a href="javascript:;">About</a></li>
    </ul>


 </div>

关键在于利用脚本在每个锚点(a元素)中建立几个分隔层，这样就可以在鼠标悬停时分别控制它们产生动画。为此，我们要在DOM加载完成时候修改 DOM的结构，使得每个锚点代码变成如下：

<a href="javascript:;">
    <span class="out">Home</span>
    <span class="bg"></span>
    <span class="over">Home</span>
</a>


 阅读全文
2010
07/16
作者
admin
分类：
JS/ajax
TAGS

1 条评论

【教程】jQuery打造动态渐变按钮

【教 程】jQuery打造动态渐变按钮

这是写给web设计者和前端开发者的教程，我们将演示如何使用Photoshop创建按钮的sprite图，然后是如何使用jQurey打造动 态渐变效果。本教程分为以下三步：

Step1 – Photoshop


Step2 – HTML/CSS


Step3 – JavaScript(jQuery)


Step4 – CSS修改

最终结果如下：

您可以点击查看演示， 也可以点击下载源代码。

Step1 – Photoshop

1. 新建文件

按钮的尺寸是100px X 80px，但由于我们需要创建一个有两种状态的CSS sprite背景图，所以我们在Photoshop中创建（Ctrl+N）一个长宽为200px X 160px的图片文件，如下图：

2. 创建参考线

为了使绘制按钮更容易，我们创建参考线，从标尺中拉出参考线，如果你找不到标尺，可以按Ctrl+R显示，如下图：

阅读全文

2010
07/16
作者
admin
分类：
JS/ajax
TAGS



抢沙发

案例

2010
07/08
作者
admin
分类：
个人日志
抢沙发

界面设计测试规范

老早前收藏的一篇文章了，发出来一起学习下

目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。

1．易用性：

按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界 面的功能并进行相关的正确操作。

易用性细则：

  1. 完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
  2. 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
  3. 按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
  4. 界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
  5. 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
  6. 同一界面上的控件数最好不要超过劳过度10个，多于10个时可以考虑使用分页界面显示。
  7. 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab
  8. 默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。
  9. 可写控件检测到非法输入后应给出说明并能自动获得焦点。
  10. Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。
  11. 复选框和选项框按选择几率的高底而先后排列。
  12. 复选框和选项框要有默认选项，并支持Tab选择。
  13. 选项数相同时多用选项框而不用下拉列表框。
  14. 界面空间较小时使用下拉框而不用选项框。
  15. 选项数叫少时使用选项框，相反使用下拉列表框。
  16. 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

2．规范性：

通常界面设计都按Windows界面的规范来设计，即包含”菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循 规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。

规范性细则：

  1. 常用菜单要有命令快捷方式。
  2. 完成相同或相近功能的菜单用横线隔开放在同一位置。
  3. 菜单前的图标能直观的代表要完成的操作。
  4. 菜单深度一般要求最多控制在三层以内。
  5. 工具栏要求可以根据用户的要求自己选择定制。
  6. 相同或相近功能的工具栏放在一起。
  7. 工具栏中的每一个按钮要有及时提示信息。
  8. 一条工具栏的长度最长不能超出屏幕宽度。
  9. 工具栏的图标能直观的代表要完成的操作。
  10. 系统常用的工具栏设置默认放置位置。
  11. 工具栏太多时可以考虑使用工具厢。
  12. 工具箱要具有可增减性，由用户自己根据需求定制。
  13. 工具箱的默认总宽度不要超过屏幕宽度的1/5。
  14. 状态条要能显示用户切实需要的信息，常用的有：
    目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一 操作需要的时间较长，还应该显示进度条和进程提示。
  15. 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
  16. 状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。
  17. 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。
  18. 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。
  19. 右键快捷菜单采用与菜单相同的准则。

阅读全文

2010
07/06
作者
admin
分类：
技术殿堂
1 条评论

高分辨率下文字字体、图像、界面布局的解决方案

为什么要保证我们的软件产品或应用程序中的文本、图像和字体、布局等问题呢，因为我们用户的终端显示设备通常型号和设置各异，如最近出现的 16×9，低于8”的等最新款式移动手提电脑，我们的应用程序和软件产品通常会在这样的终端变得面目全非，而这显然给用户的使用带来了严重的问题，直接导 致的问题如：操作易用性Usability、功能可接近性Accessibility、文本可读性Readability 等，而这样的问题并非不可逾越，要解决如何让我们的应用程序在高分辨率的显示下仍然保持正常可视，重点需要解决四个方面的问题文本和字体、图像（图形、图 标和鼠标指针）、版面设置和重绘等。

前言

所有的应用程序都可以工作在高分辨率下显示吗？答案当然是否定的。现在比较标准的计算机显示器都已经可以支持显示大概96像素点/英寸的分辨率了， 而且越来越多的应用程序都可以运行在这种分辨率下，但是却仍然面临分辨率日益增长的带来的危险。现在，我们可以轻松的买到一台133-DPI显示分辨率的 笔记本电脑，甚至还有170DPI的，也许几年以后200-DPI的显示分辨率已经随处可见了，著名的工业杂志DisplaySearch曾经预言在 2002年底有40%的膝上电脑已经超过100-DPI的屏幕分辨率了，而且这个数字还在增长。

例图 1.各种常见分辨率下字体外观

点此在新窗口浏览图片

现在大多数的应用程序要想显示正常都依赖于分辨率，我们有些应用程序如果没有高分辨率的支持将会变得非常丑陋并且导致用户易用性降低，与此同时越来 越多的用户使用了大字体。但是遗憾的是当分辨率在130-DPI和200-DPI的时候是不成比例的，在96-DPI下的同一个应用程序在这种分辨率下会 变得无法使用，有的时候这些应用程序的字体或控件会一律变得很小，但是更多的情况是一部分界面元素的尺寸正确的（例如，应用程序使用了缺省的字体，那么将 会在这个基础上比原来大一些）而另外一部分不正确，如下图所示：

例图2. 改变分辨率带来的影响

点此在新窗口浏览图片

由此可见，增强和改善我们应用程序在高分辨率下的显示支持是非常有必要的，那么重要的标准应该是：图片看起来更好，文本也应该看起来更清晰。比如文 本在200-DPI分辨率显示器上清晰的像激光打印机输出的一样（因为计算机显示有更多的颜色像素和灰度缩放支持，200-DPI的显示器的质量相当于 600-DPI的打印机）所以PDA和Smartphone的厂商相对于纸介更看重高分辨率下的显示。

开发一个适应多分辨率的应用程序不是很简单，尤其对于一个已经成形的应用程序和系统来说，动静可能不小，但是它的好处是可以使我们不必再假设分辨率 的各种情况，避免不能缩放带来的质量下降（比如说位图和位图字体），而且开发支持高分辨率的应用程序有时候会觉得有些单调和乏味，但是如果我们的产品或应 用程序是为了服务于特定人群的（比如说视力不好、和需要长时间工作的人以及视弱人群），那么我们的工作就会变得非常有必要（在高对比度下和使用扩展大字体 的情况都和高分辨率有关）。

系统韵律

Windows平台本身提供了帮助解决用户系统高分辨率问题的解决途径，我们可以通过一个小函数GetDeviceCaps()先获得当前的显示分 辨率，然后通过GetSystemMetrics()这个系统韵律函数和读取系统信息和参数的SystemParametersInfo()函数提供的方 法来改变windows中的图形以及控件元素、和字体的尺寸，从一个3d的边框效果乃至到一个小图标的尺寸，都可以随心所欲的改变。

点此在新窗口浏览图片

大概原理是首先利用GetDeviceDaps()这个函数获得当前分辨下的X、和Y轴的数值作为基准；然后再确定要缩放到多少。

关键问题

在设计高分辨率的应用程序过程中，我们要特别注意四个重要的方面：文本和字体、图像（图形、图标和鼠标指针），版面设置以及重绘。
本文链接:

http://www.52design.com/html/200707/design2007718102205.shtml

2010
07/06
作者
admin
分类：
技术殿堂
抢沙发