东城网站开发:15个响应式jQuery UI代码段和模块

2019.08.16 mf_web

75

随着响应式网页设计逐渐成为每个网站的必备设备,在设计移动设备和平板电脑设备时,已经开始出现更多与用户界面相关的问题。

在此展示中,我们提供了15个新鲜且响应迅速的jQuery代码段,可在移动设备,平板电脑或常规浏览器上浏览您的网站时增强用户体验。东城网站开发

用户界面

MultiScroll

响应式jQuery UI代码段

Multiscroll是一个功能强大的jQuery插件,允许您使用两个垂直滚动面板创建拆分页面。这种强大的效果不仅适用于所有现代浏览器(甚至IE8!),而且还兼容移动设备和平板电脑,即使在您的网站的响应版本上,您也可以利用这种美妙的效果。

如何使用:

实现这种效果很容易; 您所要做的就是链接到<head>标记内的脚本文件,并将以下代码块放在<body>标记内。

TourTip

TourTip

TourTip是网页元素的交互式视觉指南。不要使用静态帮助消息或说明文字来混淆您的界面,而是添加页面指南,让您的用户了解新功能。此脚本在演示网站或新产品或服务或帮助指南的登录页面上很有用。凭借其直观的界面,它可以解释任何超级简单的任务。

如何使用:

TourTip在构建时考虑了自定义,允许您使用多个变量,因此您可以根据自己的目的和需求进行调整。

jQuery Tilted Page Scroll

jQuery Tilted Page Scroll

这个高级的jQuery片段允许您使用页面滚动插件创建3D倾斜滚动效果。效果看起来非常简单,但它可以为您的博客,摄影或投资组合网站增添不错的风格。与IE之外的现代浏览器的兼容性已经过测试。

jQuery提示卡

jQuery提示卡

以下代码段允许您创建一个允许用户浏览它们的卡片布局。这个想法很有趣,并且已经由Google的“Tips”项目实施。您可以通过多种方式使用此代码段,例如使用它来显示最新的博客文章,投资组合项目,网页游戏等。

如何使用:

这种效果很好,因为它可以让你“堆叠”内容,因为翻转卡片的性质。使用它链接到头部的脚本并将脚本回调放在页脚中。

Slinky.js

Slinky.js

Slinky.js是一个jQuery插件,用于创建带有堆叠标题的漂亮的滚动导航列表。这会在体验通常的浏览时创建类似移动设备的环境。由于它的轻量级(大约1KB),它创造了流畅和愉悦的体验,并且与您喜欢的浏览器的最新版本兼容。

如何使用:

在jQuery之后将下载的文件包含在脚本标记中,并在要激活Slinky的jQuery元素上调用call.slinky()。

GoalProgress

GoalProgress

GoalProgress是一个插件,允许您使用jQuery创建动画进度条。填写所需的输入,插件计算目标的进度并为该栏设置动画。您可以在金额之前和之后指定文本。此插件非常适合为任何类型的活动或活动创建各种基于捐赠的活动。

如何使用:

您所要做的就是引用脚本的样式文件,在页面上创建一个空的html div并初始化脚本。

表格和输入

卡

如果您正在开发电子商务项目,那么这个小巧但美观的代码片段就是您所需要的。只需一行代码,您就可以提供信用卡信息供用户输入。为四种卡类型创建动画,为用户提供直观的免费开源体验。

如何使用:

在HTML中包含并引用所需的文件。初始化脚本并在当前表单中创建或替换具有各自样式的输入值。

Unibox

Unibox

Unibox是一个javascript jQuery插件,允许您的通用搜索框提供基于查询的搜索建议。在用户提交标签后,可以显示各种内容 - 从链接到图像或任何类型的元数据。

如何使用:

Unibox安装起来有点棘手,但并不难。在配置的页面上包含脚本文件和css文件,并安装服务器端和客户端插件。由于此插件的工作方式,提供建议,您必须为客户端安装脚本,并在服务器端安装另一个脚本。

Vanillabox

Vanillabox

Vanillabox是一个简单但现代的灯箱式jQuery插件,可以轻松设置您的图库。它具有简单和简约的设计,适用于所有现代浏览器。它是众多类似插件中的一种,安装简单,重量轻,是现有插件的替代品。

如何使用:

安装简单; 只需链接html文件的<head>标记中的脚本和css文件,然后调用脚本。

媒体

ToneDen播放器

ToneDen播放器

ToneDen是适用于SoundCloud配置文件的纯JS可自定义音频播放器。它是一个完全可自定义的小部件,为您提供了一系列选项来改善您的聆听体验。简单而简约的用户界面令人赏心悦目,并且不会在页面上造成任何混乱。

如何使用:

由于有多种显示和播放音乐的方式,因此有很多方法可以自定义此播放器。它在选项方面非常先进,开发人员做得很好,很容易玩它。使用该脚本进行基本使用或检查文档以进行高级配置。

披萨派图表

披萨派图表

此代码段允许您向任何设备提供“类似披萨”的图表。它是一个易于使用的插件,可以与Zurb的响应式框架一起使用,也可以作为独立的脚本使用。关于这个插件没什么可说的,因为它唯一的选择是显示饼图或创建者称之为“披萨”图表,但它们非常好用,易于使用和可定制,以至于它不是错误的已将此脚本包含在此列表中。

如何使用:

引用css和js文件,你几乎设置了一个基本的饼图,但不要忘记html。

导航

飞侧菜单

飞侧菜单

如果您想创建一个Airbnb风格的菜单,那么这个脚本正是您所需要的。它完全免费,兼容主流浏览器和移动设备。

如何使用:

该脚本为您提供了一些实验和自定义的空间,但请记住,基本选项有些限制,但足以简单使用。

Hashtabber

Hashtabber

这是一个简单的JavaScript插件,用于hashchange驱动的选项卡式内容切换器。有几种方法可以很好地利用这个脚本,因为它适用于移动设备。它有一些预设的主题和几种自定义的方法。

如何使用:

链接html中的相应文件并构建一个html HashTabber部分。

Headhesive.js

Headhesive.js

Headhesive.js创建一个按需粘贴头。指定标题的固定位置,其余部分是魔术。使用这个简单但有用的代码片段来创建动画和粘性导航栏。

如何使用:

在文件夹中包含提供的JavaScript文件,并在页脚中调用它。

创建一个列表并设置其样式。为每个<li>元素提供适当的ID,然后初始化脚本。如有必要,自定义预设设置。

东城网站开发

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP