首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

动图展示 60+ 个前端常用插件库合集

LazyLoad 官网:Lazy Load 延伸:Vanilla JavaScript Lazy Load Plugin Lazy Load帮助高度较长网页进行延迟载入图片,尚未浏览到该部分时,不会载入视角外图片...jquery-loading 官网:jquery-loading 起源于为了在读取或运行中,锁住特定对象,并同时保持让浏览者可以操作页面的其他部分。...Muuri.js 官网:Muuri Muuri是一个JavaScript Layout引擎,让你可以构建多样化Layout,并具有响应式、可排序、可过滤、拖拽移动或动画效果。...Slidebars 官网:Slidebars Github:Slidebars Slidebars是一个jQuery框架,提供网站或网站应用程序侧边选单。...toastr提供一个范例页面toastr examples,方便自订效果跟产生源码,类似Customize and download · Bootstrap效果,方便使用者加快流程,先前介绍ALERTIFY

6.5K40

前端常用插件

seajs: 前端模块加载器,解决模块化、依赖等问题 jQuery-One-Page-Nav: 单页应用中一个用于处理导航库 js.js: Javascript 实现 javascript JIT...支持 jquery.scrollTo: 在页面上以一个元素为起始以动画方式移动(ScrollTo)到另一个元素, 支持回退等 jScrollPane: 自定义滚动条,让所有浏览器都显示一样滚动条...border-width 和 background-position 实现各种动态效果,看真相 Fluidbox: 页面上内嵌图片放大缩小效果,类似于 Medium 中效果 jquery-validation...progressbar.js: 简洁美观进度条,扁平化 pigshell: 一个由 Javascript 实现Shell, 将互联网当做一个大文件系统, 通过 cd/ls/cat…..等命令,...: jQuery 动画库一个增强,用于现代浏览器 wysihtml: 富文本编辑器,适用于现代浏览器 slip: 一个通过滑动或者拖拽来操控列表库 evil-icons: 一个矢量图库,提供 Ruby

4.7K61
您找到你想要的搜索结果了吗?
是的
没有找到

waypoint_使用jQuery Waypoint创建粘性导航标题

我已经看到这些程式化三角形边缘丝带在整个互联网上突然冒出(一个著名例子是FacebookIntroducing Timeline页面),尽管它们具有一定吸引力,但我不得不承认,它们创造空间效果并没有...最重要是,您将熟悉jQuery Waypoints插件基础知识,该插件将提供高级功能:当用户向下滚动时,导航将停留在视口顶部,并进行更改以指示当前部分。...摆脱了大多数不可能直边丝带几何形状之后,让我们继续。 步骤3:脚本 为了实现浮动效果,我们将使用Caleb Troughton一个名为WaypointsjQuery插件。....stop()通过清除jQuery事件队列来防止可能错误。...当没有什么东西遮挡屏幕那部分时,这是违反直觉。 现在我们有了一个导航,这变得非常烦人。 这是Ariel FleslerScrollTo进行救援地方。

3.3K30

超好看30款网站侧边设计

第一分:为什么需要网站侧边? 侧边其实就是一种比较经典网站导航设计,它形式通常为竖向一列,展示在网站右侧或者左侧,具体位置当然是取决于整体设计。...但总体来讲,侧边对网站好处有以下: ● 放置导航菜单以快速引导访客; ● 突出显示关键信息,例如广告、联系方式或最新消息; ● 刺激用户进行点击和浏览,降低跳出率,提升转化; 第二分:30个优秀网站侧边设计...Jasminestar Jasminestar侧边文本设计比较独特,看起来像一个左旋90°顶部导航,并且使用留白突出显示,还提供了关闭按钮,方便用户以自己喜欢方式浏览页面。 ? 7....Love billy Love billy也是使用粗体字作为侧边,既可以作为导航来指导用户,也让整个界面看上去很具有时尚感和个性。 ? 11....Goltz group Goltzgroup侧边具有少许透明效果,缓和了和整体界面的分割。 ? 更多网站侧边设计 21.

11.8K10

Bootstrap使用及环境搭建详解

举个例子:响应式导航 如果没有Bootstrap,我需要知道移动端、平板设备等屏幕尺寸,然后通过@media不同尺寸引入不同样式,来完成一个响应式,其中还要考虑IE8等浏览器是否兼容,等一些列问题都可能存在...扯个题外话,如果你们团队中有10个前端开发人员,还是响应式导航为例子,我相信每个人写法和思路都不同,有可能你用ul列表,别人用div,这就是导致思路不统一,需要沟通等问题,如果我们都用Bootstrap...(3)sass(针对 Sass 项目中引入) 从 Less 到 sass 源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 项目中引入,一般情况下用不到此包。...-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->

2.6K20

Bootstrap实战 - 单页面网站

二、知识点 2.1 滚动监听 滚动监听使用了 Bootstrap JavaScript 插件,根据滚动条所处位置自动更新选中导航。...滚动监听一般与导航配合使用,这里先引用了带有二级导航导航。...id="nav-menu",滚动监听效果是由样式为 scrollspy(这里可以是任意值,只是做个示例)载体在其容器滚动条变化时,随着载体内容在视觉中变化,其 id 对应导航做出相应反应...一级导航效果图: [一级导航效果图] 二级导航效果图: [二级导航效果图] 2.2 定制 下载 Bootstrap 源码虽然经过了压缩,但是依然有几百 k 大小。...可以在官网定制页面设置自己需要: 通用 CSS 组件 JavaScript 组件 jQuery 插件 例如:滚动监听只需要导航组件,基础 CSS 样式和 Scrollspy JavaScript 插件

8.9K104

前端框架你究竟选什么

Apache称,该版本标志着Flex新时代开始,Flex未来将由社区来驱动,而不是由一个公司驱动。开发者可以通过贡献代码,来帮助改进Flex,如修复bug、增加功能等。...使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。...5、jQuery UI jQuery UI 是一套 jQuery 页面 UI 插件,包含很多种常用页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择...你不用去了解这样那样javascript框架,通过java你就可以写出功能丰富界面,可以做单元测试,毕竟是google产品,严重支持一下! 8、YUI Yahoo!...以上都是个人收集整理,不知道现在都在用什么框架,其中粗体部分仅仅代表个人关点!

2.3K61

Titan商店 - 又一个Web静态项目

JavaScript开发过程中,广泛使用了ECMAScript6标准(即一些ES6特性)。项目共分为四个模块界面:主页、购物车、注册页面与商品详情页面。...在线演示 具体演示效果可以访问演示地址来查看 https://demo.titan6.cn/titanshop/ 主页部分 主页部分主要实现了导航、主页Banner轮播图、商品列表页以及Footer...其中导航与Footer为了保持整个项目的设计一致性,在其他页面也同样引入。...商品详情界面 商品详情页面实现了秒杀倒计时功能,其主要实现原理是:通过获取当前时间时间戳,与结束时间时间戳求差值,获取毫秒差值,再通过一系列时间换算计算剩余天数、小时数、分钟数和秒数。...由于本次项目为静态前端演示项目,结束时间是在JS部分随机生成。而DOM操作是通过jQuery实现通过setInterval函数来绑定一个计时器,动态地更新时间到页面中。 ? ?

1.3K10

Bootstrap运用终极指南

(使用实例时建议按照自己需求进行修改,而不是简单复制、粘贴。)实例模板包括网格布局、基于jumbotron布局、各种导航条和其它定制组件(例如博客页面、封面图、登录页等)。...只需要在CSS中省略viewport元标记,覆盖每个网格层容器宽度,删除导航上所有折叠和展开行为,并在使用网格布局时对它们进行一些调整就可以了。关于操作详情,你可以阅读入门文档中说明。...1.Fuel UX 是一组用于web应用程序附加JavaScript控件。它提供了超过12个jQuery控件供部署使用,如数据中继器、树、导航等。 2....Bootstrap Timepicker 这个时间控件,通过鼠标或者方向键就可以轻松选择一个时间文本输入。 22....Flippant.js 是一个迷你JavaScript和CSS类库,用于翻转页面元素,与其他类库没有依赖关系,便于自定义使用。 27.

4.1K11

BootStrap应用开发学习入门1

导航在移动设备视图中是折叠,随着可用视口宽度增加,导航也会水平展开。在 Bootstrap 导航核心中,导航包括了站点名称和基本导航定义样式。...#黑色导航样式,创建一个带有黑色背景白色文本反色导航 .navbar-fixed-top #导航固定在页面的顶部 .navbar-fixed-bottom .navbar-static-top...#随着页面一起滚动静态导航 .navbar-header #div标签 .navbar-brand #a标签使用文本看起来更大一号 # 第一个是 data-toggle,用于告诉 JavaScript....navbar-nav #ul 标签 导航 .navbar-text #导航文本 .navbar-form #导航表单 .navbar-right #导航组件对齐方式...查看 Bootstrap 当前支持 jQuery 版本 通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码 (首选方式),如果需要关闭请采用下列方式

44.2K20

BootStrap应用开发学习入门1

导航在移动设备视图中是折叠,随着可用视口宽度增加,导航也会水平展开。在 Bootstrap 导航核心中,导航包括了站点名称和基本导航定义样式。...#黑色导航样式,创建一个带有黑色背景白色文本反色导航 .navbar-fixed-top #导航固定在页面的顶部 .navbar-fixed-bottom .navbar-static-top...#随着页面一起滚动静态导航 .navbar-header #div标签 .navbar-brand #a标签使用文本看起来更大一号 # 第一个是 data-toggle,用于告诉 JavaScript....navbar-nav #ul 标签 导航 .navbar-text #导航文本 .navbar-form #导航表单 .navbar-right #导航组件对齐方式...查看 Bootstrap 当前支持 jQuery 版本 通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码 (首选方式),如果需要关闭请采用下列方式

44.6K21

七个帮助你处理Web页面层布局jQuery插件

布局可以创建任何你想要UI外观; 从简单标题或侧边到具有工具,菜单,帮助面板,状态,子表单等复杂应用程序。集成并增强其他UI小部件,如选项卡,手风琴和对话框,以创建丰富界面。 ?...图片发自简书App 3.jLayout jLayout JavaScript库提供了用于布局组件布局算法。...jQuery展开左右侧栏目插件PageSlide,pageslide插件功能实现现实隐藏侧边功能。...插件可以读取另个一html,也可以是当前页面元素,目前比较流行导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错 demo:http://www.jq22.com/jquery-info343...可以轻松而准确地实现浮动图像文字环绕效果。 ?

9.3K20

个人博客建设——Hexo主题icarus_config.icarus.yml配置参数注释

正文 本篇用于记录我在Hexo个人博客中使用icarus主题中配置文件,为了方便使用该主题小伙伴们进行配置,我根据该主题提供一些说明进行整理到了配置文件中,方便英语弱小伙伴使用。...此logo会显示在导航和页脚。...(可选) # 你应该在大部分时间里把这个空着 publisher_logo: # 页面图片 (可选) # 你应该在大部分时间里把这个空着...atom.xml rss: atom.xml # 页面顶部导航配置 navbar: # 导航菜单项 menu: 首页: / 文章归档: /archives...# 请注意,侧边只有在至少有一个小部件时才可见 sidebar: # 左配置 left: # 当页面滚动时左侧侧边是否停留在顶部 sticky:

72030

友好Bootstrap,让你越码越“上瘾”

Bootstrap 包含组件如下:字体图标、下拉菜单、按钮组、按钮式下拉菜单、输入框组、导航导航条、分页、标签、徽章、巨幕、页头、缩略图、提示框、进度条、媒体对象、列表组、面板、对话框等。...同时Bootstrap 也提供较为丰富jQuery插件,比如过渡效果、对话框、下拉菜单、滚动监听、标签页和提示框等一系列插件,在后续文章中会逐步讲解其用法。...用户生产环境Bootstrap:下载包为编译并且压缩后CSS、JavaScript 和字体文件,不包含文档和源码文件。...Bootstrap 源码:包含Less、JavaScript 和字体文件源码等。...Sass:这是Bootstrap 从Less 到Sass 源码移植项目,用于快速地在Rails、Compass或只针对Sass 项目中引入。 参考地址如下。

2K20

Jquery 使用技巧总结

它是一个简洁快速灵活JavaScript框架,它能让你在你网页上简单操作文档、处理事件、实现特效并为Web页面添加Ajax交互。...7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。...例如: 引入之后便可在页面的任意地方使用jQuery提供语法。...》和《使用 jQuery 简化 Ajax 开发》 (说明:以上文档都放在了【附件】中) 四、语法总结和注意事项 1、关于页面元素引用 通过jquery$()引用元素包括通过id、class、...$("#msg").text("new content"); //将“new content” 作为普通文本串写入id为msg元素节点内容中,页面显示粗体<

2.8K20

Markdown库研究 && 前端MD模块推荐 -- Mavon-Editor

JavaScript库 等........、showdown、md-page等,这里面既有前端解析库,也有后台解析库,我没有时间能去研究和对比每一个库,大部分是通过体验别人开发demo来体验每个库功能,首先我pass掉了所有的后端库(其实也看了一个...首先来看几张效果图 解析 [mavonEditor_01.png] 编辑 [mavonEditor_02.png] 轻易拓展 -- emoji [mavonEditor_03.png] Mavon-Editor...非常丰富基本功能,包括:标题、斜体、粗体、下划线、中划线、标记、上角、下角、居左居中具右、引用、有序序列、无序序列、连接、图片、代码、表格、标题导航、全屏编辑模式、全凭阅读模式、单模式、查看html...同时提供多种API,能够自定义功能功能模块,基本样式,以及事件监听如:监控文本变动、模式切换变动等,详细可以参见文档。

2.6K00

每周一书--《Bootstrap基础教程》

关于本书 本书主要围绕 Bootstrap 框架,讲述如何利用 Bootstrap 制作出漂亮前端页面。本书 主要分为以几部分。...第一分主要讲解了 Bootstrap 中布局,Bootstrap 中提供了网格系统用于页面的基本 布局,同时我们也可以利用 HTML 元素特性结合 CSS 来布局,Bootstrap 对这些元素默...第三分主要讲解了 Bootstrap 中导航,在本书中,下拉菜单、按钮、导航条等都归 结为导航,提供一些功能性引导作用。Bootstrap 提供了很便捷方式来开发相应功 能组件。...第四分主要讲解了 Bootstrap 中一些内置组件,这些组件提供了 Web 开发中一些较为常见使用效果。...第五分主要讲解了 Bootstrap 对 JavaScript 支持,Bootstrap 提供了默认 jQuery 插件去实现一些动态效果展示。

1.5K90

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券