当前位置： 首页 > article >正文

【jQuery】插件

article 2026/2/16 22:14:44

目录

一、 jQuery插件

1. 瀑布流插件： jQuery 之家   http://www.htmleaf.com/  

2. 图片懒加载： jQuery 插件库  http://www.jq22.com/     

3. 全屏滚动

总结不易~ 本章节对我有很大收获，希望对你也是~~~

一、 jQuery插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

  1. jQuery 插件库  http://www.jq22.com/    
  2. jQuery 之家   http://www.htmleaf.com/  

jQuery 插件使用步骤：

  1. 引入相关文件。（jQuery 文件 和 插件文件）    
  2. 复制相关html、css、js (调用插件)。

jQuery 插件演示：

  1. 瀑布流
  2. 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）  
    当我们页面滑动到可视区域，再显示图片。  
    我们使用jquery 插件库  EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
  3. 全屏滚动（fullpage.js）      
    gitHub： https://github.com/alvarotrigo/fullPage.js      
    中文翻译网站： http://www.dowebok.com/demo/2014/77/

1. 瀑布流插件： jQuery 之家   http://www.htmleaf.com/  

素材自取：jQueryStudy: jQuery学习仓库 - Gitee.com

查看演示后 直接下载即可！！

下载成功后可以通过index.html来查看样式~ 这里通过查看网页源代码

可以看到，要实现当前效果就要引入别人写好的css、dist、js文件

使用方法：

1. css的引入：

2.  JavaScript的引入：

3. html的复制：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用--><link rel="stylesheet" href="./css/main.css"><link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet"><link rel="stylesheet" href="./dist/sortable.min.css"><script type="text/javascript" src="./dist/sortable.min.js"></script></head><body><main class="sortable"><div class="container"><div class="wrapper"><ul class="sortable__nav nav"><li><a data-sjslink="all" class="nav__link">All</a></li><li><a data-sjslink="flatty" class="nav__link">Flatty</a></li><li><a data-sjslink="funny" class="nav__link">Funny</a></li></ul><div id="sortable" class="sjs-default"><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-1.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 1</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, eius, asperiores. Incidunt sapienteest quae iure...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-2.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 2</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vitae necessitatibus, doloremsimilique vero explicabo...</p></div></div></div><div data-sjsel="funny"><div class="card"><img class="card__picture" src="./images/item-3.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 3</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, placeat voluptate, fuga tenetur eosducimus animi porro...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-4.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 4</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloremque quisquam, obcaecati undenamest quos...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-5.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 5</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse corporis hic minima nisireprehenderit...</p></div></div></div><div data-sjsel="funny"><div class="card"><img class="card__picture" src="./images/item-6.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 6</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus, id, deserunt inventore...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-7.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 7</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum enim beatae vero culpa, fuga, magnisuntdolores nam...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-8.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 8</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam, blanditiisnecessitatibus...</p></div></div></div><div data-sjsel="funny"><div class="card"><img class="card__picture" src="./images/item-9.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 9</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur adipisci voluptatum laborumofficiis...</p></div></div></div></div></div></div></main><script type="text/javascript">document.querySelector('#sortable').sortablejs()</script>
</body></html>

那么最后不论是标题还是图片都可以自己直接进行切换即可~~~

2. 图片懒加载： jQuery 插件库  http://www.jq22.com/     

素材自取：https://gitee.com/liu-yihao-hhh/j-query-study/tree/master/jQuery-03/09-%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD

将压缩版放入文件的js中： 

下一步同样是进入index.html 的网页源代码进行复制，但是这里要根据插件规则进行修改：

通过ctrl + h 直接进行将全部图片进行替换！ 

这个插件的引入， 必须要写道所有的图片的下面

现在就可以实现懒加载效果了！！！

3. 全屏滚动

gitHub： https://github.com/alvarotrigo/fullPage.js      

中文翻译网站： http://www.dowebok.com/demo/2014/77/

使用方法 

这里就不过多赘述了~

这里有各种选项的配置可以使用：

总结不易~ 本章节对我有很大收获，希望对你也是~~~

相关文章：

【jQuery】插件

目录 一、 jQuery插件 1. 瀑布流插件&#xff1a; jQuery 之家 http://www.htmleaf.com/ 2. 图片懒加载&#xff1a; jQuery 插件库 http://www.jq22.com/ 3. 全屏滚动 总结不易~ 本章节对我有很大收获&#xff0c;希望对你也是~~~ 一、 jQuery插件 jQuery 功能…...

编程日记 2026/2/15 19:27:10

MATLAB导入Excel数据

假如Excel中存在三列数据需要导入Matlab中。 保证该Excel文件与Matlab程序在同一目录下。 function [time, voltage, current] test(filename)% 读取Excel文件并提取时间、电压、电流数据% 输入参数:% filename: Excel文件名&#xff08;需包含路径&#xff0c;如C:\data\…...

编程日记 2026/2/15 21:33:27

主流软件工程模型全景剖析

一、瀑布模型 阶段划分 需求分析&#xff1a;与用户深入沟通&#xff0c;全面了解软件的功能、性能、可靠性等要求&#xff0c;形成详细的需求规格说明书。设计阶段&#xff1a;包括总体设计和详细设计。总体设计确定软件的体系结构&#xff0c;如模块划分、模块之间的接口等&…...

编程日记 2026/2/12 9:49:22

python和Java的区别

Python和Java是两种流行的编程语言&#xff0c;它们之间有一些重要的区别&#xff1a; 语法&#xff1a;Python是一种动态类型的脚本语言&#xff0c;语法简洁明了&#xff0c;通常使用缩进来表示代码块。Java是一种静态类型的编程语言&#xff0c;语法更为严格&#xff0c;需要…...

编程日记 2026/2/15 23:56:12

孤码长征：破译PCL自定义点云注册机制源码迷局——踩坑实录与架构解构

在之前一个博客《一文搞懂PCL中自定义点云类型的构建与函数使用》中&#xff0c;清晰地介绍了在PCL中点云的定义与注册方法。我的一个读者很好奇其内部注册的原理以及机制&#xff0c;再加上最近工作中跟猛男开发自定义点云存储的工作&#xff0c;借着这些需求&#xff0c;我也…...

编程日记 2026/2/15 10:54:36

【SQL】MySQL基础2——视图，存储过程，游标，约束，触发器

文章目录 1. 视图2. 存储过程2.1 创建存储过程2.2 执行存储过程 3. 游标4. 约束4.1 主键约束4.2 外键约束4.3 唯一约束4.4 检查约束 5. 触发器 1. 视图 视图是虚拟的表&#xff0c;它是动态检索的部分。使用视图的原因&#xff1a;避免重复的SQL语句&#xff1b;使用表的部分而…...

编程日记 2026/2/14 22:17:32

Centos 7 搭建 jumpserver 堡垒机

jumpserver 的介绍 1、JumpServer 是完全开源的堡垒机, 使用 GNU GPL v2.0 开源协议, 是符合4A 的专业运维审计系统 1)身份验证 / Authentication 2)授权控制 / Authorization 3)账号管理 / Accounting 4)安全审计 / Auditing 2、JumpServer 使用 Python / Django 进行开…...

编程日记 2026/2/15 22:38:09

封装了一个优雅的iOS全屏侧滑返回工具

思路 添加一个全屏返回手势&#xff0c;UIPangesturerecognizer, 1 手势开始 在手势开始响应的时候&#xff0c;将navigationController的delegate代理设置为工具类&#xff0c;在工具类中执行代理方法&#xff0c;- (nullable id )navigationController:(UINavigationControll…...

编程日记 2026/2/15 11:13:44

HCIP-6 DHCP

HCIP-6 DHCP DHCP&#xff08;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议&#xff09; 手工配置网络参数存在的问题 灵活性差 容易出错 IP地址资源利用率低 工作量大 人员素质要求高 DHCP服务器按照如下次序为客户端选择IP地址: ①DHCP服务器的数…...

编程日记 2026/2/16 1:53:55

OpenCV图像拼接（8）用于实现并查集（也称为不相交集合）数据结构类cv::detail::DisjointSets

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::detail::DisjointSets 类是OpenCV库中用于实现不相交集合&#xff08;也称为并查集&#xff09;数据结构的类。该数据结构常用于处理动态连接…...

编程日记 2026/2/12 13:53:52

opencv图像处理之指纹验证

一、简介 在当今数字化时代&#xff0c;生物识别技术作为一种安全、便捷的身份验证方式&#xff0c;正广泛应用于各个领域。指纹识别作为生物识别技术中的佼佼者&#xff0c;因其独特性和稳定性&#xff0c;成为了众多应用场景的首选。今天&#xff0c;我们就来深入探讨如何利…...

编程日记 2026/2/15 9:27:24

记一道CTF题—PHP双MD5加密+”SALT“弱碰撞绕过

通过分析源代码并找到绕过限制的方法&#xff0c;从而获取到flag&#xff01; 部分源码&#xff1a; <?php $name_POST[username]; $passencode(_POST[password]); $admin_user "admin"; $admin_pw get_hash("0e260265122865008095838959784793");…...

编程日记 2026/2/15 22:27:28

Text2SQL推理类大模型本地部署的解决方案

大家好，我是herosunly。985院校硕士毕业，现担任算法工程师一职，获得CSDN博客之星第一名，热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委，编写微软OpenAI考试认证指导手册。曾获得多项AI顶级比赛的Top名次，其中包括阿里云、科大讯飞比赛第一名…...

编程日记 2025/5/15 5:26:40

机器学习的一百个概念（3）上采样

前言 本文隶属于专栏《机器学习的一百个概念》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见[《机器学习的一百个概念》 ima 知识库 知识库广场搜索&…...

编程日记 2026/2/16 6:48:02

Electron应用生命周期全解析：从启动到退出的精准掌控

一、Electron生命周期的核心特征 1.1 双进程架构的生命周期差异 Electron应用的生命周期管理具有明显的双进程特征&#xff1a; 主进程生命周期&#xff1a;贯穿应用启动到退出的完整周期渲染进程生命周期&#xff1a;与浏览器标签页相似但具备扩展能力进程间联动周期&#…...

编程日记 2025/12/12 4:09:32

AI渗透测试：网络安全的“黑魔法”还是“白魔法”？

引言&#xff1a;AI渗透测试&#xff0c;安全圈的“新魔法师” 想象一下&#xff0c;你是个网络安全新手&#xff0c;手里攥着一堆工具&#xff0c;正准备硬着头皮上阵。这时&#xff0c;AI蹦出来&#xff0c;拍着胸脯说&#xff1a;“别慌&#xff0c;我3秒扫完漏洞&#xff0…...

编程日记 2025/4/20 15:25:37

分秒计数器设计

一、在VsCode中写代码 目录 一、在VsCode中写代码 二、在Quartus中创建工程与仿真 1、建立工程项目文件md_counter 2、打开项目文件&#xff0c;创建三个目录 3、打开文件trl&#xff0c;创建md_counter.v文件 4、打开文件tb&#xff0c;创建md_counter_tb.v文件 5、用VsCod…...

编程日记 2026/2/15 22:34:31

Flink介绍——发展历史

引入 我们整个大数据处理里面的计算模式主要可以分为以下四种&#xff1a; 批量计算&#xff08;batch computing&#xff09; MapReduce Hive Spark Flink pig流式计算&#xff08;stream computing&#xff09; Storm SparkStreaming/StructuredStreaming Flink Samza交互计…...

编程日记 2026/2/16 19:56:59

12. STL的原理

目录 1. 容器、迭代器、算法 什么是迭代器? 迭代器的作用&#xff1f; 迭代器的类型&#xff1f; 迭代器失效 迭代器的实现细节&#xff1a; 2. 适配器 什么是适配器&#xff1f; 适配器种类&#xff1a; 3. 仿函数 什么是仿函数&#xff1f; 仿函数与算法和容器的…...

编程日记 2026/2/16 1:53:26

OSPFv3 的 LSA 详解

一、复习&#xff1a; OSPFv3 运行于 IPv6 协议上&#xff0c;所以是基于链路&#xff0c;而不是基于网段&#xff0c;它实现了拓扑和网络的分离。另外&#xff0c;支持一个链路上多个进程&#xff1b;支持泛洪范围标记和泛洪不识别的报文&#xff08;ospfv2 的行为是丢弃&…...

编程日记 2026/2/15 16:12:18

python 原型链污染学习

复现SU的时候遇到一道python原型链污染的题&#xff0c;借此机会学一下参考&#xff1a; 【原型链污染】Python与Jshttps://blog.abdulrah33m.com/prototype-pollution-in-python/pydash原型链污染 文章目录 基础知识对父类的污染命令执行对子类的污染pydash原型链污染打污染的…...

编程日记 2026/2/16 1:53:36

Windows 图形显示驱动开发-WDDM 2.4功能-GPU 半虚拟化（十一）

注册表设置 GPU虚拟化标志 GpuVirtualizationFlags 注册表项用于设置半虚拟化 GPU 的行为。 密钥位于&#xff1a; DWORD HKLM\System\CurrentControlSet\Control\GraphicsDrivers\GpuVirtualizationFlags 定义了以下位&#xff1a; 位描述0x1 ​ 为所有硬件适配器强制设置…...

编程日记 2025/11/24 21:49:22

入栈操作-出栈操作

入栈操作 其 入栈操作 汇编代码流程解析如下&#xff1a; 出栈操作 其 出栈操作 汇编代码流程解析如下&#xff1a;...

编程日记 2026/2/16 1:26:01

C++ 多态：面向对象编程的核心概念（一）

文章目录 引言1. 多态的概念2. 多态的定义和实现2.1 实现多态的条件2.2 虚函数2.3 虚函数的重写/覆盖2.4 虚函数重写的一些其他问题2.5 override 和 final 关键字2.6 重载/重写/隐藏的对比 3. 纯虚函数和抽象类 引言 多态是面向对象编程的三大特性之一&#xff08;封装、继承、…...

编程日记 2026/2/15 14:58:58

传统策略梯度方法的弊端与PPO的改进：稳定性与样本效率的提升

为什么传统策略梯度方法&#xff08;如REINFORCE算法&#xff09;在训练过程中存在不稳定性和样本效率低下的问题 1. 传统策略梯度方法的基本公式 传统策略梯度方法的目标是最大化累积奖励的期望值。具体来说&#xff0c;优化目标可以表示为&#xff1a; max ⁡ θ J ( θ )…...

编程日记 2026/2/15 11:25:01

我的机器学习学习之路

学习python的初衷 • hi&#xff0c;今天给朋友们分享一下我是怎么从0基础开始学习机器学习的。 • 我是2023年9月开始下定决心要学python的&#xff0c;目的有两个&#xff0c;一是为了提升自己的技能和价值&#xff0c;二是将所学的知识应用到工作中去&#xff0c;提升工作…...

编程日记 2026/2/15 6:46:38

Spring Boot 的自动装配

Spring Boot 的自动装配&#xff08;Auto Configuration&#xff09;是其核心特性之一&#xff0c;通过智能化的条件判断和配置加载机制&#xff0c;极大简化了传统 Spring 应用的配置复杂度。其原理和实现过程可概括为以下几个关键点&#xff1a; 一、核心触发机制&#xff1a…...

编程日记 2026/2/13 7:15:40

Python数据可视化-第3章-图表辅助元素的定制

教材 本书为《Python数据可视化》一书的配套内容&#xff0c;本章为第3章-图表辅助元素的定制 本章主要介绍了图表辅助元素的定制&#xff0c;包括认识常用的辅助元素、设置坐标轴的标签、设置刻度范围和刻度标签、添加标题和图例、显示网格、添加参考线和参考区域、添加注释文…...

编程日记 2026/2/15 23:52:41

`git commit --amend` 详解：修改提交记录的正确方式

文章目录 git commit --amend 详解&#xff1a;修改提交记录的正确方式1. 修改提交信息2. 补充遗漏的文件3. 结合 --amend 进行交互式修改4. 已推送提交的修改总结 git commit --amend 详解&#xff1a;修改提交记录的正确方式 git commit --amend 用于修改最近一次的提交&…...

编程日记 2026/2/13 18:46:03

Linux系统下C语言fork函数使用案例

一、fork函数的作用 生成一个子进程&#xff0c;异步执行某个任务&#xff1b; 二、子进程的作用 1、子进程能复制一份父进程的变量、函数&#xff1b; 2、子进程可以和父进程同时并发执行&#xff1b; 函数语法&#xff1a; pid_t fork() 说明&#xff1a;调用后返回一个进程…...

编程日记 2026/2/15 18:53:48