jQuery将物体居中，并且转换显示和隐藏

最新推荐文章于 2024-11-28 13:53:44 发布
最新推荐文章于 2024-11-28 13:53:44 发布
阅读量389 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： jquery 居中显示 显示隐藏切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ly89cn/article/details/46292029
本文介绍如何使用jQuery实现元素的居中显示及点击按钮后的显示与隐藏切换效果。通过设置标识符控制显示状态，利用窗口尺寸计算元素位置，使元素在页面中水平垂直居中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天来给大家贴一段代码，代码的作用就是利用jQuery将物体居中，并且转换显示和隐藏；

首先建立一个div标签并且写好css样式，具体如下

然后我想要的效果是当我点击了button这个按钮，test可以居中显示，第二次点击一次test消失，第三次点击又居中显示，这样循环下去；

具体js代码如下：

稍微解释一下代码的意思：

1、$('#test').get(0).flag = true;是为了建立一个标识，告诉浏览器什么时候应该显示，什么时候应该隐藏

2、上面的top就是让浏览器窗口的高度减去自己本身的高度再除以2就是平均高度，同理left也是这样，这里注意一下，页面的头部要加上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

不然jQuery获取高度可能会无效！

此文章属于王业楼的个人博客原创,若要转载请注明出处:王业楼的个人博客 www.ly89.cn

黑六
关注
最全面、最详细web前端面试题及答案总结
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
jQuery实现的浮动层div浏览器居中显示效果
10-20
本篇文章将详细讲述如何使用jQuery实现一个浮动层（Div）在浏览器中居中显示的效果。 首先，我们需要在HTML页面的`<head>`部分引入jQuery库。在文档中，我们通过`<script>`标签引入了jQuery的压缩版本（`jquery-...
jquery实现div水平垂直居中显示
☆╮123☆
06-13 725
div class="index_container"> 样式：width: 1280px; height: 785px; margin: 0 auto;js:$(function () { $(window).on('resize', function(){ var w = ($(window).width() - $(".index_container")
jquery实现页面加载进度条(转)
weixin_33762321的博客
01-08 846
实现原理： 根据页面执行js的顺序将遮罩层和loading图片最先显示出来，等到页面加载完成后，用js控制图片消失。既在网页的头部放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，根据浏览器的载入顺序来实现的简易 Loading 状态条。 比较简单的步骤是： 1、首先在&lt;body&gt;&lt;/body&gt;开始的地方放置 &lt;div id="...
7.2 CSS 2D,3D转换与动画
qq_42874319的博客
05-18 597
声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩 JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新） 文章目录1. CSS 2D转换1.1 2D转换之 - 移
华清远见-重庆中心-前端技术总结/知识点梳理/个人总结
qq_64008133的博客
02-13 387
关于前端的阶段性总结
视差滚动技术：创建深度感和动态交互的网页设计
weixin_32836713的博客
11-28 1064
本文还有配套的精品资源，点击获取 简介：视差滚动是一种利用不同速度背景层移动来创建深度感和立体效果的网页设计技术。通过CSS3、JavaScript/jQuery、背景定位等技术实现。它增强了用户体验，并在多个层面上通过性能优化和响应式设计来确保兼容性和流畅度。 1. 视差滚动的基本概念与原理 1.1 视差滚动简介 视差滚动是一种网页设计技术，通过模拟...
手把手教你完成第一个JS项目：用简单到极致的贪吃蛇游戏熟悉JS语法
Maynor的博客
07-04 1813
文章目录前言思路分析：第一关 Pixelbox.js的下载和使用第二关 孵一条小蛇-蛇的创建第三关 让小蛇动起来-移动蛇可以移动了，还很丝滑~ 前言 贪吃蛇被业内视为真正意义上的第一款手机游戏，玩法简单到极致，随着诺基亚手机的流行风靡一时！在本次课程中我们采用Pixelbox.js这个框架进行开发，其核心是数据模型及渲染。通过贪吃蛇的开发，我们将对JS的语法更加的熟悉，同时学习如何把一个需求给分解成具体的开发步骤，培养你做项目的思维。 我们先来看一下开发完后的效果： 是不是很有复古的气息！！！没做过的小伙
Python高级-前端-01-HTML和CSS
mysteryflower的专栏
07-19 903
课程介绍 前端开发系统化学习教程，包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。 前端开发概述 什么是前端开发？ 前端开发也叫做web前端开发，它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发。 什么互联网产品？ 互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务，百度搜索、...
jquery实现弹窗功能（窗口居中显示）
10-18
在本篇指南中，我们将学习如何使用jQuery来实现一个总是居中显示在浏览器窗口中的弹窗功能。...通过阅读本文，您可以掌握如何利用jQuery和一些基础的HTML、CSS技巧来创建一个美观且功能完善的居中弹窗。
jQuery插件实现控制网页元素动态居中显示
01-19
本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下： (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !...
jquery实现div上下左右居中显示的插件.zip
09-27
标题中的“jquery实现div上下左右居中显示的插件.zip”指的是一个基于jQuery的JavaScript插件，用于在网页中使div元素实现垂直和水平居中显示。这种功能在网页设计和开发中非常常见，尤其在创建响应式布局或动态内容...
基于SVM算法的人民币面值识别系统：从图像处理到机器学习模型的实现与应用 · 数字图像处理
08-11
基于支持向量机(SVM)的人民币面值识别系统的设计与实现。该系统利用MATLAB GUI工具，结合数字图像处理技术和机器学习模型，能够高效识别多种面值的人民币。主要步骤包括数据集准备、图像灰度化、边缘检测、旋转矫正、形态学操作、ROI截取、加载SVM模型、面值识别及结果验证。系统目前可识别1元至100元面值，正确率达到90%以上，并可通过扩展训练数据集来提升识别精度和覆盖更多面值。 适合人群：从事图像处理、机器学习研究的技术人员，以及对人民币面值识别感兴趣的开发者。 使用场景及目标：适用于银行、自助设备、零售终端等需要快速准确识别人民币面值的场合。目标是提供一种高效、准确、易用的人民币面值识别解决方案。 其他说明：该系统不仅展示了SVM在图像分类任务中的强大能力，还通过MATLAB GUI实现了操作流程的可视化，便于用户理解和使用。未来可以通过优化算法和增加训练样本进一步提升系统性能。
ctkqiang-WangZhongZhi-62936-1753627160067.zip
08-11
点sun小白ctkqiang_WangZhongZhi_62936_1753627160067.zip
LabVIEW调用基恩士XGX8500相机实现高效画面嵌入的开源方案 权威版
08-11
如何使用LabVIEW调用基恩士XGX8500相机实现画面嵌入的技术方案。首先，文中强调了准备工作的重要性，包括安装LabVIEW及其相关驱动和SDK，获取基恩士XGX8500相机的接口文档。接着，阐述了通过调用基恩士提供的API控制相机的具体步骤，如初始化相机、设置参数、开启预览流、获取画面数据等。然后，讲解了如何将获取的画面数据嵌入到LabVIEW的程序中，通过图形界面设计使相机画面合理显示。最后，指出该方案不仅能够节省昂贵的HX软件授权费用，还因其源程序和方法的开放性，为用户提供更多定制化的可能。 适合人群：从事工业自动化、机器视觉领域的工程师和技术人员。 使用场景及目标：适用于需要集成高质量图像采集设备的工业生产和检测系统，旨在提升自动化水平和视觉信息丰富度，降低软件授权成本。 其他说明：文中附有简单代码片段，帮助读者更好地理解和实践该方案。
PANDA 真空泵 WV 1200 A、WV 1800 A 和 WV 2400 A 使用说明书.pdf
最新发布
08-11
PANDA 真空泵 WV 1200 A、WV 1800 A 和 WV 2400 A 使用说明书.pdf
基于Jenkins Pipeline实现Java项目自动化构建与发布
08-11
资源下载链接为： https://pan.quark.cn/s/22ca96b7bd39 在当今的软件开发领域，自动化构建与发布是提升开发效率和项目质量的关键环节。Jenkins Pipeline作为一种强大的自动化工具，能够有效助力Java项目的快速构建、测试及部署。本文将详细介绍如何利用Jenkins Pipeline实现Java项目的自动化构建与发布。 Jenkins Pipeline简介 Jenkins Pipeline是运行在Jenkins上的一套工作流框架，它将原本分散在单个或多个节点上独立运行的任务串联起来，实现复杂流程的编排与可视化。它是Jenkins 2.X的核心特性之一，推动了Jenkins从持续集成（CI）向持续交付（CD）及DevOps的转变。 创建Pipeline项目 要使用Jenkins Pipeline自动化构建发布Java项目，首先需要创建Pipeline项目。具体步骤如下： 登录Jenkins，点击“新建项”，选择“Pipeline”。 输入项目名称和描述，点击“确定”。 在Pipeline脚本中定义项目字典、发版脚本和预发布脚本。 编写Pipeline脚本 Pipeline脚本是Jenkins Pipeline的核心，用于定义自动化构建和发布的流程。以下是一个简单的Pipeline脚本示例： 在上述脚本中，定义了四个阶段：Checkout、Build、Push package和Deploy/Rollback。每个阶段都可以根据实际需求进行配置和调整。 通过Jenkins Pipeline自动化构建发布Java项目，可以显著提升开发效率和项目质量。借助Pipeline，我们能够轻松实现自动化构建、测试和部署，从而提高项目的整体质量和可靠性。
信捷PLC与HMI驱动的印刷机设备程序：四步进电机控制与汽缸印刷系统的开发与学习
08-11
信捷PLC与HMI驱动的印刷机设备程序，涵盖四个步进电机控制（X、Y、Z三向抓取定位放置系统）和分度转盘定位系统。程序包含详细的注释，便于理解和维护。信捷PLC采用标准工业编程语言，确保高稳定性和可靠性；HMI界面设计直观易用，增强了操作便捷性。该程序适用于表盘和电路板等印刷设备的开发，支持自动化生产和提高生产效率。 适合人群：工控爱好者、印刷设备开发者和技术人员。 使用场景及目标：①用于表盘和电路板等印刷设备的开发；②作为工控爱好者的学习参考资料；③提升自动化生产能力，优化生产流程，降低成本。 其他说明：该程序不仅为实际生产提供了技术支持，同时也帮助工控爱好者提高技术水平和实践能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值