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…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...