jQuery实现框里画面的展开、收起和停止
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…...
less 查看文本时，提示may be a binary file.See it anyway?
解决办法 首先使用echo $LESSCHARSET查看less的编码 看情况设置less的编码格式(我的服务器上使用utf-8查看中文) 还要特别注意一下，Linux中存在的文本文件的编码一定要是utf - 8;（这一步很关键） 例如：要保证windows上传到Linux的…...
H266/VVC帧内预测编码技术概述
预测编码技术 预测编码（Prediction Coding）是指利用已编码的一个或多个样本值，根据某种模型或方法，对当前的样本值进行预测，并对样本真实值和预测值之间的差值进行编码。 视频中的每个像素看成一个信源符号ÿ…...
重组蛋白表达系统的比较-卡梅德生物
一、重组蛋白表达是什么？ 重组蛋白表达是通过基因工程手段将目标蛋白基因导入宿主细胞，使其表达出特定的蛋白。该过程包括以下步骤： 1. 构建表达载体：将目标蛋白基因插入表达载体中，通常选择带有启动子、终止子和选择…...
【Java、Python】获取电脑当前网络IP进行位置获取（附源码）
我相信看到这篇博客的时候心里肯定是想解决自己的一个问题的，而这篇博客我就以简单快速的方式解决这些烦恼！ 一、获取当前IP 在Java中自带了一些自己的流对象来获取当前的IP地址，不多说我们直接上代码。 //获取当前网络ip地址 ipAddress Ine…...
接口测试学习笔记
文章目录 认识urlhttp协议接口规范Postman实现接口测试设计接口测试用例使用软件发送请求并查看响应结果Postman 自动关联Postman如何提交multipart/form-data请求数据Postman如何提交查询参数Postman 如何批量执行用例单接口测试Postman 断言Postman参数化 接口测试自动化requ…...
一起玩儿物联网人工智能小车（ESP32）——14. 用ESP32的GPIO控制智能小车运动起来（二）
摘要：本文主要讲解如何使用Mixly实现对单一车轮的运动控制。 下面就该用程序控制我们的小车轮子转起来了。打开Mixly软件，然后单击顶部“文件”菜单中的“新建”功能，我们来开启一个新程序的开发工作。 我们的工作同样是先从最简单的开始&am…...
[PyTorch][chapter 8][李宏毅深度学习][DNN 训练技巧]
前言： DNN 是神经网络的里面基础核心模型之一.这里面结合DNN 介绍一下如何解决 深度学习里面过拟合,欠拟合问题 目录： DNN 训练常见问题 过拟合处理 欠拟合处理 keras 项目 一 DNN 训练常见问题 我们在深度学习网络训练的时候经常会遇到下面…...
Nginx快速入门：实现企业安全防护｜nginx部署https,ssl证书（七）
0. 引言 之前我们讲到nginx的一大核心作用就是实现企业安全防护，而实现安全防护的原理就是通过部署https证书，以此实现参数加密访问，从而加强企业网站的安全能力。 nginx作为各类服务的统一入口，只需要在入口处部署一个证书&…...
将Go语言开发的Web程序部署到K8S
搭建K8S基础环境 如果已经有K8S环境的同学可以跳过，如果没有，推荐你看看我的《Ubuntu22加Minikue搭建K8S环境》，课程目录如下： Ubuntu22安装Vscode 下载：https://code.visualstudio.com/Download 安装命令&#…...
Python发送数据到Unity实现
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…...
Unity 渲染顺序受哪些影响（相机depth、SortingLayer、Render Queue、透明）
目录 相机深度（Camera Depth） Clear Flags 多相机渲染不同部分 SortingLayer 先后顺序 Render Queue Render Queue的作用 Render Queue的分类 GeometryLast（值为2500） 渲染顺序总结 相机深度（Camera Depth&am…...
【论文笔记】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。 在设计神经网络结构的时候ÿ…...
python常用函数汇总
python常用函数汇总 对准蓝字按下左键可以跳转哦 类型函数数值相关函数abs() divmod() max() min() pow() round() sum()类型转换函数ascii() bin() hex() oct() bool() bytearray() bytes() chr() complex() float() int() 迭代和循环函数iter() next() e…...
阶段十-物业项目
可能遇到的错误： 解决jdk17javax.xml.bind.DatatypeConverter错误 <!--解决jdk17javax.xml.bind.DatatypeConverter错误--><dependency><groupId>javax.xml.bind</groupId><artifactId>jaxb-api</artifactId><version>…...
使用 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…...
【数据库】postgressql设置数据库执行超时时间
在这篇文章中，我们将深入探讨PostgreSQL数据库中的一个关键设置：SET statement_timeout。这个设置对于管理数据库性能和优化查询执行时间非常重要。让我们一起来了解它的工作原理以及如何有效地使用它。 什么是statement_timeout？ statemen…...
SQL语言之DDL
目录结构 SQL语言之DDLDDL操作数据库查询数据库创建数据库删除数据库使用某个数据库案例 DDL操作表创建表查看表结构查询表修改表添加字段删除字段修改字段的类型修改字段名和字段类型 修改表名删除表案例 SQL语言之DDL DDL：数据定义语言，用来定义数…...
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 …...
golang的jwt学习笔记
文章目录 初始化项目加密一步一步编写程序另一个参数--加密方式关于StandardClaims 解密解析出来的怎么用关于`MapClaims`上面使用结构体的全代码实战项目关于验证这个项目的前端初始化项目 自然第一步是暗转jwt-go的依赖啦 #go get github.com/golang-jwt/jwt/v5 go get githu…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #：…...
FFmpeg：Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】，注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录（即exe所在文件夹）加入系统变量…...
详细解析)
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...