jQuery界面技术和教程

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

随着JavaScript/web应用程序库和框架的出现,为站点构建交互式组件变得更加容易。对于不熟悉的人来说jQuery-它是一个流行的,高性能和紧凑的JavaScript库/框架。jQuery通过提供一组有用的、高度优化的、经过充分测试的函数和方法,可以减少处理浏览器异常、内存泄漏和重复代码所需要编写的代码量。

在本文中,我们将探讨jQuery在让web开发人员创建令人印象深刻的基于客户端的用户界面组件方面的优势.无论您是在寻找建立在Query上的特定界面/交互模式(比如模块选项卡或模态窗口),还是只是想通过逐步学习教程来学习这个库,您都应该能够在这里找到适合您的东西。

模态窗口

1.如何使用jQuery创建一个令人惊叹和流畅的弹出窗口

如何使用jQuery教程截图创建一个令人惊叹和流畅的弹出窗口。在本jQuery教程中,您将发现一种创建光滑模态窗口的技术,当用户单击触发元素(在本例中是表单)时,该窗口将出现提交输入,但您可以轻松地将其修改为其他HTML元素,如<一>).本教程还将向您展示如何处理键盘按键事件,以便您可以将键盘快捷键合并到界面中。现场演示

2.简单的jQuery模态窗口教程

简单的jQuery模态窗口教程教程截图。本模态窗口教程使用rel属性指示链接是否使用内联内容打开模态窗口。您将看到一些流行的jQuery方法,如.click ()而且. css ()方法。现场演示

3.用jQuery构建模态面板

用jQuery教程截图构建模态面板。本jQuery教程讨论了一种创建模态窗口的方法,该方法在设计中为没有打开JavaScript的用户内置了优雅降级功能。

工具提示

4.用jQuery创建一个更好的工具提示

用jQuery awesome教程截图制作一个更好的工具提示。本教程将向您展示一种方法,用于替换出现在图像和链接等元素上的内置浏览器工具提示标题属性。现场演示

5.jQuery的智能工具提示

带有jQuery教程截图的智能工具提示此工具提示技术将检查链接是否具有标题属性与否,如果没有属性,它就跳过它标题现场演示

6.Coda弹出气泡

结束弹出气泡教程截图。这个优秀的jQuery教程向您展示了如何在鼠标悬停在目标对象上时创建漂亮的弹出气泡。现场演示

模块标签

7.使用jQuery创建一个幻灯片标签框

创建一个幻灯片选项卡框使用jQuery屏幕截图。这个简单的教程将向您展示如何创建一个集模块选项卡界面,当您单击选项卡时,它可以左右滑动内容。现场演示

8.使用jQuery创建一个选项卡界面

使用jQuery创建一个选项卡界面。这个非常详细的循序渐进的教程将向您展示如何使用jQuery创建选项卡界面。现场演示

9.jQuery选项卡式界面

jQuery选项卡界面截图。这个优秀的教程是流行的选项卡界面的另一个变体。现场演示

10.jQuery的标签

jQuery选项卡屏幕截图。本教程采用屏幕播放格式,面向初学者和设计师。现场演示

展示图片

11.使用jQuery创建滑动图片标题

创建滑动图像标题与jQuery屏幕截图。本图片库教程向您展示了一种有趣的交互技术,当用户将鼠标悬停在特定图像上时,该技术可以使标题向上滑动,以显示有关该图像的更多信息。

12.图像交叉渐隐过渡

图像交叉渐隐过渡屏幕截图。本教程将向您展示如何将另一个图像淡入,当用户将其悬停时叠加到当前图像上。这是显示一张特定图像的更多信息的好方法。现场演示

13.一个基本的图片库- jQuery的方式

一个基本的图片库- jQuery的方式屏幕shto。通过利用jQuery在遍历DOM和DOM操作方面的优势,创建一个基本的图像库。现场演示

14.使用jQuery显示图片

图片显示使用jQuery截图。这个快速而简单的教程向您展示了通过观察窗口事件(在本例中是鼠标悬停)来隐藏和显示元素的概念。

15.内联图像放大与jQuery

内联图像放大与jQuery屏幕截图。这个jQuery教程向您展示了一个灵活的动画方法,当用户将鼠标悬停在缩略图大小的照片上时,它可以放大照片。

16.滑块画廊

滑块图库屏幕截图。在本jQuery教程中,您将学习如何创建一个倾斜的滑动图库jQuery UI使处理主题化web组件轻而易举。现场演示

17.简单的jQuery图片幻灯片显示半透明的标题

简单的jQuery图片幻灯片显示半透明标题屏幕截图。在本教程中,您将了解调整元素不透明度的概念,以及如何使用setInterval函数来延迟另一个函数的触发。现场演示

18.BBC Radio 1 Zoom Tabs

BBC Radio 1 Zoom Tabs屏幕截图。本截屏教程向您展示如何放大和缩小图像,以及当用户将鼠标悬停在图像上时显示模块选项卡界面。教程的灵感来自于英国广播公司1网站显示了类似的效果。现场演示

19.照片滑动器教程

照片滑块教程截图。本教程向您展示了如何轻松实现Photo Slider JS库来创建一个令人惊叹但用户友好的滑动图片库。现场演示

与内容交互/显示内容

20.用jQuery创建一个“可筛选的”作品集

用jQuery截图创建一个“可筛选的”作品集。在本jQuery教程中,您将发现一种创建可以按类别筛选的图库的方法。现场演示

21.如何建立一个超级杜珀新闻滚动

如何构建一个超级杜珀新闻滚动屏幕截图。本截屏格式的教程将向您展示如何创建一个新闻滚动条来显示连接到RSS提要的动态新闻提要。本教程还使用PHP和SimplePie连接RSS频道。

22.使用jQuery调整文本大小

jQuery文本调整屏幕截图。调整网页上的文本大小通常是一个有价值的网站功能,可以帮助调整网页内的文本,而不是使用浏览器的功能。本教程将介绍一种使用jQuery调整文本大小的方法,无论您使用的字体大小单位是什么(例如,px, em, %)。

现场演示

23.jQuery顺序列表

jQuery顺序列表屏幕截图。本教程利用DOM操作来创建一个jQuery脚本,它将取代您的无序(< ul >)及订购(< ol >)列表变成更花哨的东西。您将在本教程中学习编写的脚本在JavaScript关闭的情况下会优雅地降级。现场演示

24.用jQuery动画您的消息框

用jQuery屏幕截图动画您的消息框。在本教程中,您将了解如何使用jQuery制作消息框动画的技术。现场演示

25.用jQuery和XML创建一个Amazon Books小部件

使用jQuery和XML创建一个Amazon Books小部件屏幕截图。在本教程中,您将学习如何利用jQuery和Amazon API在可水平滚动的内容区域内显示产品。现场演示

26.构建一个jquery驱动的标签云

构建一个jquery支持的标签云屏幕截图。标签云可以有效地显示网站上最受欢迎的类别或关键词。通过使用jQuery并跟随本教程学习,您可以在站点上创建一个出色的标记云小部件。

27.简单jQuery间谍效果

简单的jQuery间谍效果截图。在本教程中,您将发现一种模仿Digg的创新技术Digg的间谍(这里是Digg Spy的前身)。现场演示

28.Coda滑块效应

结尾滑块效果屏幕截图。学会创造Coda在这个循序渐进的屏幕播放中使用jQuery滑动内容区域。现场演示

Web表单

29.使用jQuery改进搜索框

用jQuery截图改进搜索框。跟随jQuery教程创建搜索框,当用户关注它们时,它们会被突出显示。现场演示

30.用jQuery构建一个难以置信的登录表单

构建一个难以置信的登录表单与jQuery屏幕截图。如果您有兴趣创建更美观、更具互动性的注册表单,当用户单击它时,它会从它的位置下拉,这个优秀的jQuery教程将向您展示如何创建这种表单。现场演示

导航菜单

31.使用CSS和jQuery的水平滚动菜单

水平滚动菜单与CSS和jQuery屏幕截图。本jQuery教程将向您展示如何创建一个令人印象深刻的可滚动菜单,它可以根据用户的鼠标移动进行移动。现场演示

32.淡出菜单-替换内容

淡出菜单-替换内容屏幕截图。根据Chris Coyier的优秀教程创建一个动画渐隐导航菜单。现场演示

33.jQuery背景图像动画

使用jQuery制作背景图像动画截图。乔纳森·斯努克向我们展示了通过转换背景图像位置来创建一个流畅的动画导航菜单是多么容易。现场演示

34.jQuery动画菜单

jQuery动画菜单截图。学习如何创建这个令人印象深刻的基于jquery的导航菜单,它具有有趣的动画效果。现场演示

35.创建一个苹果风格的菜单,并通过jQuery改进它

创建一个苹果风格的菜单,并通过jQuery截图改进它。本教程将向您展示如何创建一个受苹果启发的导航菜单,当鼠标悬停在该菜单上时,它将展开导航项。现场演示

36.多级下拉菜单与CSS和jQuery

多级下拉菜单与CSS和jQuery屏幕截图。本教程向您展示如何利用一些强大的jQuery方法,例如()而且. css ()创建一个动画的多级下拉导航菜单。现场演示

37.jQuery & CSS示例-下拉菜单

jQuery & CSS示例-下拉菜单截图。在这个jQuery教程中,您将找到一个快速而简单的方法来创建下拉菜单。(教程页面的现场演示)

38.使用jQuery和CSS创建浮动HTML菜单

使用jQuery和CSS创建浮动HTML菜单的屏幕截图。这个基于jquery的导航菜单教程将向您展示如何创建一个菜单,它在您滚动页面时跟随您上下移动。现场演示

39.导航列表菜单+ jQuery动画效果教程

导航列表菜单+ jQuery动画效果教程截图。在这个jQuery教程中,您将学习如何将导航列表菜单动画化的技术。

40.水平滑动导航使用jQuery和CSS

水平滑动导航使用jQuery和CSS屏幕截图。学习创建一个壮观的滑动导航,当用户悬停在导航项上时,其动画被触发。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!