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

jQuery实现框里画面的展开、收起和停止

news 2026/4/2 9:29:49

jQuery实现框里画面的展开、收起和停止

主要用到动画效果中的三个操作：
(“id”).slideDown(3000)； // 后面的数字表示效果的时长
(“id”).stop();
(“id”).slideUp(3000);

效果图

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>展开和收起</title><style>html,body {margin: 0;padding: 0;}#main {width: 310px;margin: 0 auto;}#btn>button {border-radius: 4px;font-size: 16px;background: #409eff;border: none;color: #ffffff;outline: none;margin: 10px 0;width: 100px;height: 32px;line-height: 32px;cursor: pointer;}#btn>button:hover {opacity: 0.8;}#panel {width: 310px;color: #eee;font-family: cursive;text-align: center;}#title {background-color: rgb(255, 153, 0);font-size: 24px;height: 36px;line-height: 36px;letter-spacing: 20px;padding-left: 20px;color: #ffffff;}#contain {background-color: #666666;padding: 20px 0;overflow: hidden;}</style>
</head><body><div id="main"><div id="btn"><button id="flip">展开</button><button id="stop">停止</button><button id="pack-up">收起</button></div><div id="panel"><div id="title">初恋</div><div id="contain">当初相遇苹果林，<br>你才挽起少女的发型。<br>前鬓插着如花的彩梳，<br>映衬着你的娟娟玉容。<br><br>你脉脉地伸出白净的手，<br>捧起苹果向我相赠。<br>淡红秋实溢清香啊！<br>正如你我的一片初衷。<br><br>我因痴情犹入梦境，<br>一声叹息把你的青丝拂动。<br>此时似饮合欢杯啊！<br>杯中斟满了你的恋情。<br><br>苹果林中树荫下，<br>何时有了弯弯的小径？<br>心中“宝塔”谁踏基？<br>耳边犹响着你的细语声声……</div></div></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function () {$("#flip").click(function () {$("#contain").slideDown(3000);});$("#stop").click(function () {$("#contain").stop();});$("#pack-up").click(function () {$("#contain").slideUp(3000);});});</script>
</body></html>

jQuery实现框里画面的展开、收起和停止

jQuery实现框里画面的展开、收起和停止主要用到动画效果中的三个操作： (“id”).slideDown(3000)； // 后面的数字表示效果的时长 (“id”).stop(); (“id”).slideUp(3000); 效果图代码如下： <!DOCTYPE html> <html lang"en…...

编程日记 2023/12/27 11:42:14

less 查看文本时，提示may be a binary file.See it anyway?

解决办法首先使用echo $LESSCHARSET查看less的编码看情况设置less的编码格式(我的服务器上使用utf-8查看中文) 还要特别注意一下，Linux中存在的文本文件的编码一定要是utf - 8;（这一步很关键） 例如：要保证windows上传到Linux的…...

编程日记 2023/12/27 11:37:09

H266/VVC帧内预测编码技术概述

预测编码技术预测编码（Prediction Coding）是指利用已编码的一个或多个样本值，根据某种模型或方法，对当前的样本值进行预测，并对样本真实值和预测值之间的差值进行编码。视频中的每个像素看成一个信源符号&#xff…...

编程日记 2023/12/27 11:35:08

重组蛋白表达系统的比较-卡梅德生物

一、重组蛋白表达是什么？ 重组蛋白表达是通过基因工程手段将目标蛋白基因导入宿主细胞，使其表达出特定的蛋白。该过程包括以下步骤： 1. 构建表达载体：将目标蛋白基因插入表达载体中，通常选择带有启动子、终止子和选择…...

编程日记 2023/12/27 11:33:06

【Java、Python】获取电脑当前网络IP进行位置获取（附源码）

我相信看到这篇博客的时候心里肯定是想解决自己的一个问题的，而这篇博客我就以简单快速的方式解决这些烦恼！ 一、获取当前IP 在Java中自带了一些自己的流对象来获取当前的IP地址，不多说我们直接上代码。 //获取当前网络ip地址 ipAddress Ine…...

编程日记 2023/12/27 11:32:05

接口测试学习笔记

文章目录认识urlhttp协议接口规范Postman实现接口测试设计接口测试用例使用软件发送请求并查看响应结果Postman 自动关联Postman如何提交multipart/form-data请求数据Postman如何提交查询参数Postman 如何批量执行用例单接口测试Postman 断言Postman参数化接口测试自动化requ…...

编程日记 2023/12/27 11:30:03

一起玩儿物联网人工智能小车（ESP32）——14. 用ESP32的GPIO控制智能小车运动起来（二）

摘要：本文主要讲解如何使用Mixly实现对单一车轮的运动控制。下面就该用程序控制我们的小车轮子转起来了。打开Mixly软件，然后单击顶部“文件”菜单中的“新建”功能，我们来开启一个新程序的开发工作。我们的工作同样是先从最简单的开始&am…...

编程日记 2023/12/27 11:26:59

[PyTorch][chapter 8][李宏毅深度学习][DNN 训练技巧]

前言： DNN 是神经网络的里面基础核心模型之一.这里面结合DNN 介绍一下如何解决深度学习里面过拟合,欠拟合问题目录： DNN 训练常见问题过拟合处理欠拟合处理 keras 项目一 DNN 训练常见问题我们在深度学习网络训练的时候经常会遇到下面…...

编程日记 2023/12/27 11:20:53

Nginx快速入门：实现企业安全防护｜nginx部署https,ssl证书（七）

0. 引言之前我们讲到nginx的一大核心作用就是实现企业安全防护，而实现安全防护的原理就是通过部署https证书，以此实现参数加密访问，从而加强企业网站的安全能力。 nginx作为各类服务的统一入口，只需要在入口处部署一个证书&…...

编程日记 2023/12/27 11:09:44

将Go语言开发的Web程序部署到K8S

搭建K8S基础环境如果已经有K8S环境的同学可以跳过，如果没有，推荐你看看我的《Ubuntu22加Minikue搭建K8S环境》，课程目录如下： Ubuntu22安装Vscode 下载：https://code.visualstudio.com/Download 安装命令&#…...

编程日记 2023/12/27 11:01:39

Unity设置: 打开Unity项目。创建一个空的GameObject，并附加一个新的脚本TCPReceiver using System.Net; using System.Net.Sockets; using System.Text; using UnityEngine; using System.Threading;public class MyListener : MonoBehaviour {Thread thread;pub…...

编程日记 2023/12/27 10:57:35

Unity 渲染顺序受哪些影响（相机depth、SortingLayer、Render Queue、透明）

目录相机深度（Camera Depth） Clear Flags 多相机渲染不同部分 SortingLayer 先后顺序 Render Queue Render Queue的作用 Render Queue的分类 GeometryLast（值为2500） 渲染顺序总结相机深度（Camera Depth&am…...

编程日记 2023/12/27 10:54:33

【论文笔记】Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks

论文地址：Run, Dont Walk: Chasing Higher FLOPS for Faster Neural Networks 代码地址：https://github.com/jierunchen/fasternet 该论文主要提出了PConv，通过优化FLOPS提出了快速推理模型FasterNet。在设计神经网络结构的时候&#xff…...

编程日记 2023/12/27 10:51:30

python常用函数汇总

python常用函数汇总对准蓝字按下左键可以跳转哦类型函数数值相关函数abs() divmod() max() min() pow() round() sum()类型转换函数ascii() bin() hex() oct() bool() bytearray() bytes() chr() complex() float() int() 迭代和循环函数iter() next() e…...

编程日记 2023/12/27 10:44:25

阶段十-物业项目

可能遇到的错误： 解决jdk17javax.xml.bind.DatatypeConverter错误 <dependency><groupId>javax.xml.bind</groupId><artifactId>jaxb-api</artifactId><version>…...

编程日记 2023/12/27 10:43:24

使用 Jekyll 构建你的网站 - 初入门

文章目录一、Jekyll介绍二、Jekyll安装和启动2.1 配置Ruby环境1）Windows2）macOS 2.2 安装 Jekyll2.3 构建Jekyll项目2.4 启动 Jekyll 服务三、Jekyll常用命令四、目录结构4.1 主要目录4.2 其他的约定目录五、使用GitLink构建Jekyll博客5.1 生成Jekyll…...

编程日记 2023/12/27 10:42:23

【数据库】postgressql设置数据库执行超时时间

在这篇文章中，我们将深入探讨PostgreSQL数据库中的一个关键设置：SET statement_timeout。这个设置对于管理数据库性能和优化查询执行时间非常重要。让我们一起来了解它的工作原理以及如何有效地使用它。什么是statement_timeout？ statemen…...

编程日记 2023/12/27 10:36:18

SQL语言之DDL

目录结构 SQL语言之DDLDDL操作数据库查询数据库创建数据库删除数据库使用某个数据库案例 DDL操作表创建表查看表结构查询表修改表添加字段删除字段修改字段的类型修改字段名和字段类型修改表名删除表案例 SQL语言之DDL DDL：数据定义语言，用来定义数…...

编程日记 2023/12/27 10:35:17

hive高级查询（2）

-- 分组查询 SELECT sex,SUM(mark) sum_mark FROM score GROUP BY sex HAVING sum_mark > 555; SELECT sex,sum_mark FROM( SELECT sex,SUM(mark) sum_mark FROM score GROUP BY sex ) t WHERE sum_mark > 555; SELECT AVG(gid),SUM(gid)/COUNT(gid) FROM …...

编程日记 2023/12/27 10:22:05

golang的jwt学习笔记

文章目录初始化项目加密一步一步编写程序另一个参数--加密方式关于StandardClaims 解密解析出来的怎么用关于`MapClaims`上面使用结构体的全代码实战项目关于验证这个项目的前端初始化项目自然第一步是暗转jwt-go的依赖啦 #go get github.com/golang-jwt/jwt/v5 go get githu…...

编程日记 2023/12/27 10:21:04

告别直播回放获取难题！用douyin-downloader实现高效内容管理的3个创新方法

告别直播回放获取难题！用douyin-downloader实现高效内容管理的3个创新方法【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and bro…...

编程新知 2026/4/2 9:22:59

3步解决ComfyUI-Florence2视觉语言模型加载失败：实战配置指南

3步解决ComfyUI-Florence2视觉语言模型加载失败：实战配置指南【免费下载链接】ComfyUI-Florence2 Inference Microsoft Florence2 VLM 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Florence2 当您在ComfyUI中部署Microsoft Florence2视觉语言模型…...

编程新知 2026/4/2 9:18:57