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

jQuery案例专题

news 2026/2/11 0:40:41

jQuery案例专题

本学期主要担任的课程是js和jQuery，感觉用到的有一些案例挺有意思的，就对其进行了一下整理。

电影院的幕帘特效
手风琴特效
星光闪烁
网页轮播图

1.电影院的幕帘特效代码如下

`html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>幕帘效果</title>
</head>
<script type="text/javascript" src="JS/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {var curtainopen = false;//定义布尔型变量$(".rope").click(function(){//当单击超链接时$(this).blur();//使超链接失去焦点if (curtainopen == false){ //判断变量值是否为false$(this).text("关闭幕帘");//设置超链接文本 $(".leftcurtain").animate({width:'60px'}, 2000 );//设置左侧幕帘动画$(".rightcurtain").animate({width:'60px'},2000 );//设置右侧幕帘动画curtainopen = true;//变量值设为true}else{$(this).text("拉开幕帘"); //设置超链接文本$(".leftcurtain").animate({width:'50%'}, 2000 );//设置左侧幕帘动画$(".rightcurtain").animate({width:'51%'}, 2000 );//设置右侧幕帘动画curtainopen = false;//变量值设为false}});	
});	
</script><style type="text/css">*{margin:0;padding:0;}body {color: #FFFFFF;text-align: center;background: #4f3722 url('images/darkcurtain.jpg') repeat-x;}img{border: none;}p{margin-bottom:10px;color:#FFFFFF;}.leftcurtain{width: 50%;height: 495px;top: 0px;left: 0px;position: absolute;z-index: 2;}.rightcurtain{width: 51%;height: 495px;right: 0px;top: 0px;position: absolute;z-index: 3;}.rightcurtain img, .leftcurtain img{width: 100%;height: 100%;}.rope{position: absolute;top: 70%;left: 60%;z-index: 100;font-size:36px;color:#FFFFFF;}</style>
</head><body>
欢迎来到小红棉戏班<hr /><div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div><div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div><a class="rope" href="#">拉开幕布</a>
</body>
</html>

效果图如下：
在这里插入图片描述

2.手风琴特效代码如下：


```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0;  padding:0; list-style:none;}
.all{ 
width:1200px; 
height:300px; 
border:1px solid #000; 
margin:100px auto; 
overflow:hidden;   /*在ul的父级上增加溢出隐藏*/
}
.all ul{ 
width:2000px;
}/*设置ul宽度很大，防止li大于200px往下掉*/
.all li{ 
width:200px; 
height:300px; 
background:url(images/pic/01.jpg) no-repeat 0 0;  /*加载一张相同图片*/
float:left; cursor:pointer;}</style>
<body>
<div class="all"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript">
$(function(){	
$(".all li").each(function(index,obj){   	var num=index+1;$(obj).css("background","url(img/pic/0"+num+".jpg)");
/*动态加载图片，不必在li中添加*/});$(".all li").hover(function(){       	  //hover事件就有鼠标移上和离开两个功能$(this).stop().animate({width:500},200).siblings().stop().animate({width:140},200) 
/*链式写法：$(this)的图片从200变为500，其余siblings()从200变为140*/},function(){$(".all li").stop().animate({width:200},200);   /*鼠标离开所有图的宽度还原为200*/});
})
</script>

效果图如下：
在这里插入图片描述

3.星光闪烁代码如下：

html代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>星空闪烁动画</title><link rel="stylesheet" href="css/style.css"><script src="js/jquery-1.12.4.js"></script></head><body><input type="button" value="星空展示"><div class="sky"><img class="wrap" src="images/night.jpg" width="920" height="450"><div class="starWrap"><img src="images/star.png" width="150" height="150"><img src="images/star2.png" width="60" height="60"><img src="images/star.png" width="150" height="150"><img src="images/star2.png" width="60" height="60"><img src="images/star.png" width="150" height="150"><img src="images/star2.png" width="60" height="60"></div></div><script src="js/nightSky.js"></script></body>
</html>

css代码如下：

* {margin: 0;padding: 0;
}
div.sky {margin: 0 auto;width: 920px;height: 450px;
}
.wrap {display: none;
}
div .starWrap {position: absolute;top: 0;background: pink;width: 920px;
}
div .starWrap img {position: absolute;top: 20px;left: 50px;display: none;
}
div .starWrap img:nth-child(2) {position: absolute;top: 50px;left: 680px;
}
div .starWrap img:nth-child(3) {position: absolute;top: 80px;left: 180px;
}
div .starWrap img:nth-child(4) {position: absolute;top: 280px;left: 180px;
}
div .starWrap img:nth-child(5) {position: absolute;top: 180px;left: 380px;
}
div .starWrap img:nth-child(6) {position: absolute;top: 110px;left: 480px;
}

jquery代码如下：

 $('input').click(function() {$('.wrap').slideDown(1500,function() {setInterval(twinkle, 500);});});function twinkle() {$('.starWrap img:even').toggle(10);$('.starWrap img:odd').fadeToggle(300);}

效果图如下：
在这里插入图片描述

4.网页轮播图代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页轮播图效果</title><link href="css/wylbt.css" rel="stylesheet"></head><body><div id="box"><div id="pic"><!-- img添加class是为了在juqery里面设置自动轮播效果 --><img class="tp" src="img/01.jpg"><img class="tp" src="img/02.jpg"><img class="tp" src="img/03.jpg"><img class="tp" src="img/04.jpg"></div><ul><li class="num">1</li><li>2</li><li>3</li><li>4</li></ul><a class="btn1" href="#">&lt;</a><a class="btn2" href="#">&gt;</a></div></body><script src="js/jquery-1.12.4.js"></script><script src="js/wylbt.js"></script>
</html>


```css
*{margin: 0;padding: 0;
}ul,li,a{list-style: none;text-decoration: none;
}#box{width: 1210px;height: 360px;border: 1px solid red;margin:  50px auto;overflow: hidden;
}#box #pic{width: 100%;
}#box #pic .tp{position: absolute;
}#box #pic img{float: left;width: 1210px;height: 360px;
}#box ul{position: relative;top:85%;left:45%;
}#box ul li{display: inline-block;background: #ffff00;height: 30px;width: 30px;border-radius: 50%;text-align: center;line-height: 30px;margin: 10px;cursor: pointer;
}#box ul li.num{background: red;color:#fff;
}.btn1{position: relative;top:33%;width: 40px;height: 40px;background: #ccc;color:#ff5500;text-align: center;font-size: 30px;	
}
.btn2{position: relative;top:33%;left:1160px;width: 40px;height: 40px;background: #ccc;color:#ff5500;text-align: center;font-size: 30px;	
}

```javascript
//1.需要定义全局变量
var i=0; //i是控制图片的个数
var timer; //timer是一个计时器 /*
3个效果
(1) 自动轮播效果
(2) 鼠标移入移出效果
(3) 左右按钮的单击效果
*/$(function(){
//2.需要显示第一张图片，其他的图片隐藏
//显示第0张class为tp的图片，同时兄弟级siblings(同级)的其它图片隐藏$(".tp").eq(0).show().siblings().hide();
//3.完成自动轮播  编写一个函数( class 类  类名 理解为函数  java叫方法)showpic();//4.完成鼠标的移入移出$("li").hover(//移入function(){//需要获取当前li的序号i=$(this).index();//调用show函数直接切换show();	//需要将计时器函数清0  重新开始计时//通常情况  setInterval()和	clearInterval(timer)是配对使用的clearInterval(timer);},function(){showpic();});		//对左边的按钮进行单击事件 向左展示$(".btn1").click(function(){//计时器清0clearInterval(timer);//如果是第一个li 则点击之后变成最后一个liif(i==0){i=4;}i--;//调用show函数show();});	$(".btn2").click(function(){clearInterval(timer);i++;if(i==4){i=0;}show();		});});//showpic函数完成每隔三秒进行一次切换
function showpic(){//setInterval(a,b)b为时间  a必须是一个函数timer=setInterval("s()",3000);	
}//完成图片切换
function show(){//设置当前第i张class名称是tp图片，设置淡入效果fadeIn为300毫秒 //同时再次设置同级的其它tp为淡出效果fadeOut$(".tp").eq(i).fadeIn(300).siblings().fadeOut();//设置当前li的颜色$("li").eq(i).addClass("num").siblings().removeClass("num");
}function s(){//从第1张切换到第2张  再从第2张切换到第3张i++;//如果是最后一张,则再次由第1张开始切换if(i==4){i=0;}//show()函数的目的就是进行图片切换show();}

效果图如下：
在这里插入图片描述

jQuery案例专题

jQuery案例专题本学期主要担任的课程是js和jQuery，感觉用到的有一些案例挺有意思的，就对其进行了一下整理。目录： 电影院的幕帘特效手风琴特效星光闪烁网页轮播图 1.电影院的幕帘特效代码如下 html <!DOCTYPE html > <html…...

编程日记 2023/11/5 23:42:25

【Linux】服务器间免登陆访问

准备两台服务器，服务器A，服务器B 在服务器A中实现免登陆服务器B 进入服务器A操作进入目录/root/.ssh cd /root/.ssh秘钥对使用默认文件名生成秘钥对，在输入秘钥文件时直接回车则会使用默认文件名：id_rsa ssh-keygen -t rsa…...

编程日记 2023/11/5 23:40:22

【信息安全原理】——IP及路由安全（学习笔记）

目录 🕒 1. IPv4协议及其安全性分析🕒 2. IPsec（IP Security）🕘 2.1 IPsec安全策略🕤 2.1.1 安全关联（Security Association, SA）🕤 2.1.2 安全策略（Security…...

编程日记 2023/11/5 23:39:22

【jvm】虚拟机之本地方法栈

目录一、说明二、注意一、说明 1. Java虚拟机栈用于管理Javaj法的调用，而本地方法栈用于管理本地方法的调用。 2. 本地方法栈，也是线程私有的。 3. 允许被实现成固定或者是可动态扩展的内存大小。 (在内存溢出方面是相同） 4. 如果线程请求分…...

编程日记 2023/11/5 23:38:20

『CV学习笔记』图像超分辨率等图像处理任务中的评价指标PSNR(峰值信噪比)

图像超分辨率等图像处理任务中的评价指标PSNR(峰值信噪比) 文章目录一. PSNR(峰值信噪比)1.1. 定义1.2. 作用1.3. 例子1.4 . PSNR评价标准二. 参考文献一. PSNR(峰值信噪比) 1.1. 定义峰值信噪比（Peak Signal-to-Noise Ratio, PSNR）是图像超分辨率等图像处理任务中常用的一…...

编程日记 2023/11/5 23:36:15

【51nod 连续区间】题解（序列分治）

题目描述区间内的元素元素排序后任意相邻两个元素值差为 1 1 1 的区间称为“连续区间”。如 3 , 1 , 2 3,1,2 3,1,2 是连续区间， 3 , 1 , 4 3,1,4 3,1,4 不是连续区间。给出一个 1 ∼ n 1 \sim n 1∼n 的排列，问有多少连续区间。 …...

编程日记 2023/11/5 23:35:14

10.30校招实习内推面经

绿*泡*泡： neituijunsir 交流裙 ，内推/实习/校招汇总表格 1、校招｜极目智能2024届校招校招｜极目智能2024届校招 2、校招｜杭州极弱磁场国家重大科技基础设施研究院2024秋季校园招聘正式启动！ 校招&…...

编程日记 2023/11/5 23:34:13

相比typescript，python的动态类型有什么优缺点？

以下是Python的动态类型相对于TypeScript的静态类型的一些优缺点： 1、Python的动态类型优点： 更灵活：Python的动态类型允许你在运行时更灵活地改变变量的类型，这对于快速原型设计和快速开发非常有帮助。代码更简洁：…...

编程日记 2023/11/5 23:33:12

高效处理文件：批量顺序编号重命名方法

每个人都面临着文件管理的挑战，特别是那些需要处理大量文件的人。如何高效地管理这些文件一直是一个难题。为了解决这个问题，我向大家推荐一款强大的文件管理工具——固乔文件管家。这个工具可以帮助你快速有效地给文件进行批量重命名和编号，…...

编程日记 2023/11/5 23:32:11

JAVA深化篇_29—— 线程使用之线程联合以及Thread类中的其他常用方法【附有详细说明及代码案例】

线程联合当前线程邀请调用方法的线程优先执行，在调用方法的线程执行结束之前，当前线程不能再次执行。线程A在运行期间，可以调用线程B的join()方法，让线程B和线程A联合。这样，线程A就必须等待线程B执行完毕后&#xf…...

编程日记 2023/11/5 23:31:11

〖Python网络爬虫实战㊲〗- JavaScript 逆向实战（一）

订阅：新手可以订阅我的其他专栏。免费阶段订阅量1000+python项目实战 Python编程基础教程系列（零基础小白搬砖逆袭) 说明：本专栏持续更新中，订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者：爱吃饼干的小白鼠。Python领域优质创作者，2022年度…...

编程日记 2023/11/5 23:30:09

2023辽宁省数学建模A题铁路车站的安全标线完整原创论文详细讲解（含matlab代码）

大家好呀，从发布赛题一直到现在，总算完成了辽宁省数学建模A题完整的成品论文。本论文可以保证原创，保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 B预计下午两点前更新完毕，A全…...

编程日记 2023/11/5 23:29:09

（14）学习笔记：动手深度学习（Pytorch神经网络基础）

文章目录神经网络的层与块块的基本概念自定义块问答神经网络的层与块块的基本概念以多层感知机为例， 整个模型接受原始输入（特征），生成输出（预测）， 并包含一些参数（所有组成层…...

编程日记 2023/11/5 23:28:08

暴力穷举 class Solution {public int[] twoSum(int[] nums, int target) {int[] num new int[2];for(int i0;i<nums.length-1;i){for(int ji1;j<nums.length;j){if(nums[i]nums[j]target){num[0]i;num[1]j;}}}return num;} }HashMap，记录下标和对应值&…...

编程日记 2023/11/5 23:26:06

Screens for Mac 中文版远程桌面连接控制工具

Screens Mac 版是Mac os平台上的一款Mac VNC 客户终端,能够自由访问远程计算机设备， Screens Mac 版支持各种强大的远程控制辅助工具，例如剪切板共享、快捷方式自定义、安全连接、多屏幕支持、快速扫描连接等。 Screens 4 for mac支持多种远程桌面协议&…...

编程日记 2023/11/5 23:25:05

解决vmware安装ubuntu虚拟机显示不全以及无法实现windows与虚拟机之间无法相互复制粘贴问题

01、存在问题 02、解决方案 sudo apt-get autoremove open-vm-tools sudo apt-get install open-vm-tools sudo apt-get install open-vm-tools-desktop reboot //重启重启后界面如下： 存在Bug 如果遇到一下问题，请先执行下列命令&#x…...

编程日记 2023/11/5 23:24:01

希腊字母读音表

序号大写小写英文注音国际音标注音中文读音意义1Ααalphaa:lf阿尔法角度；系数2Ββbetabet贝塔磁通系数；角度；系数3Γγgammaˈɡmə伽马电导系数（小写）4Δδdeltadelt德尔塔变动；密度；屈光度5…...

编程日记 2023/11/5 23:23:00

如何使用CodeceptJS、Playwright和GitHub Actions构建端到端测试流水线

介绍端到端测试是软件开发的一个重要方面，因为它确保系统的所有组件都能正确运行。CodeceptJS是一个高效且强大的端到端自动化框架，与Playwright 结合使用时，它成为自动化Web、移动甚至桌面 (Electron.js) 应用程序比较好用的工具。在本文中…...

编程日记 2023/11/5 23:21:59

解析python爬取Ebay数据的方式

前言 Ebay是全球著名的电子商务平台之一，每天都有海量的商品信息涌入其中，在电商行业获取这些数据试试非常有价值的，为了更好地了解市场动态，掌握更多的电商行情。Python爬虫成为了必不可少的工具，本文将通过使用Http…...

编程日记 2023/11/5 23:20:57

设置DevC++支持c++11标准

1.点击编译选项 2. 设置语言标准 3.点击确认 4.测试代码使用auto成功测试！...

编程日记 2023/11/5 23:18:54

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/9 16:57:53

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2026/2/5 4:39:03

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/28 8:34:48

Robots.txt 文件

什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站效果五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目七、🎁更多干货一、👨‍&#x1f…...

编程新知 2026/2/7 22:17:30

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。第三部分&am…...

编程新知 2026/1/25 2:04:42

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/31 3:52:49

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

jQuery案例专题

jQuery案例专题

1.电影院的幕帘特效代码如下

2.手风琴特效代码如下：

3.星光闪烁代码如下：

4.网页轮播图代码如下：

相关文章：

jQuery案例专题

【Linux】服务器间免登陆访问

【信息安全原理】——IP及路由安全（学习笔记）

【jvm】虚拟机之本地方法栈

『CV学习笔记』图像超分辨率等图像处理任务中的评价指标PSNR(峰值信噪比)

【51nod 连续区间】题解（序列分治）

10.30校招实习内推面经

相比typescript，python的动态类型有什么优缺点？

高效处理文件：批量顺序编号重命名方法

JAVA深化篇_29—— 线程使用之线程联合以及Thread类中的其他常用方法【附有详细说明及代码案例】

〖Python网络爬虫实战㊲〗- JavaScript 逆向实战（一）

2023辽宁省数学建模A题铁路车站的安全标线完整原创论文详细讲解（含matlab代码）

（14）学习笔记：动手深度学习（Pytorch神经网络基础）

Leetcode-1 两数之和

Screens for Mac 中文版远程桌面连接控制工具

解决vmware安装ubuntu虚拟机显示不全以及无法实现windows与虚拟机之间无法相互复制粘贴问题

希腊字母读音表

如何使用CodeceptJS、Playwright和GitHub Actions构建端到端测试流水线

解析python爬取Ebay数据的方式

设置DevC++支持c++11标准

Linux应用开发之网络套接字编程(实例篇)

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

Robots.txt 文件

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

短视频矩阵系统文案创作功能开发实践，定制化开发

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表