jq弹窗拖动改变宽高

预览效果

在这里插入图片描述

<div class='tishiMask'><div class="tishiEm"><div id="coor"></div><div class="topNew ismove"><span class="ismove">提示</span><p onclick="closeTishi()">×</p></div><div class="bottomNew"><p>提示文字软件</p><div class="newDesignBtn"><input type="button" value="确定" class="btnLeft" onclick="closeTishi()" ><input type="button" value="取消" onclick="closeTishi(this)" class="btnRight"></div></div></div>
</div>
.tishiMask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, .18);display: block;z-index: 99999;
}
.tishiEm {z-index: 99999;/* display: none; *//* -webkit-transition: -webkit-box-shadow .2s; *//* transition: box-shadow .2s; */position: fixed;height: 220px;width: 300px;top: 38%;/* margin-top: -100px; */left: 43%;/* margin-left: -150px; */background: #fff;border-radius: 5px 5px 0px 0px;-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);/* -webkit-transition: -webkit-box-shadow .2s; *//* transition: box-shadow .2s; *//* transition: all .4s; *//* -webkit-transition: all .4s; *//* -moz-transition: all .4s; */
}.tishiEm .topNew {overflow: hidden;background-image: linear-gradient(183deg, #3d95ea 0%, #70b0e6 100%);border-radius: 5px 5px 0px 0px;
}.tishiEm .topNew span {color: #fff;font-size: 12px;height: 34px;line-height: 34px;display: block;float: left;margin-left: 10px;
}.tishiEm .topNew p {float: right;color: #fff;font-size: 20px;height: 34px;line-height: 34px;display: block;margin-right: 10px;cursor: pointer;
}.tishiEm .bottomNew {margin: 0px 0px;
}.tishiEm .bottomNew {text-align: center;
}.tishiEm .bottomNew p {font-size: 12px;height: 20px;line-height: 20px;
}
.tishiEm .bottomNew .newDesignBtn {overflow: hidden;width: 100%;height: auto;display: flex;justify-content: flex-end;align-items: center;position: absolute;bottom: 10px;left: 0;
}.tishiEm .bottomNew .newDesignBtn .btnLeft {display: block;float: left;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);background: #5da2e5;color: #fff;font-size: 12px;width: auto;text-align: center;height: 24px;line-height: 24px;border-radius: 4px;border: none;cursor: pointer;padding: 0px 14px;border: 1px solid #5da2e5;
}.tishiEm .bottomNew .newDesignBtn .btnLeft:hover {background: #1a78d9;border: 1px solid #0069b8;color: #fff;
}.tishiEm .bottomNew .newDesignBtn .btnRight {display: block;float: left;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);background: #dcdcdc;color: #383838;font-size: 12px;width: auto;text-align: center;height: 24px;line-height: 24px;border-radius: 4px;margin-right: 28px;margin-left: 10px;border: none;cursor: pointer;padding: 0px 14px;border: 1px solid #dcdcdc;
}.tishiEm .bottomNew .newDesignBtn .btnRight:hover {background: #c4c4c4;color: #383838;border: 1px solid #aaa;
}
#coor, #coor_set, #coor_syt {width: 20px;height: 20px;overflow: hidden;cursor: se-resize;position: absolute;right: 0;bottom: 0;/* background-color: #09c; */background: url(./../images/scale.png);background-size: 100% 100%;transform: rotate(270deg);z-index: 999;
}

类名tishiEm设置宽高为缩小最小宽高。

注意下方js注释

$(function () {$(document).mousemove(function (e) {if (!!this.move_gy) {var posix_gy = !document.move_target_gy ? { 'x': 0, 'y': 0 } : document.move_target_gy.posix_gy,callback_gy = document.call_down_gy || function () {let viewWidth = $(document).width();let maxLeft = viewWidth - $(".tishiEm").width();   // 左侧最大移动量let viewHeight = $(document).height();let maxHeight = viewHeight - $(".tishiEm").height();   // 底部最大移动量let currentTop = e.pageY - posix_gy.y;let currentLeft = e.pageX - posix_gy.x;if (currentTop <= 0 || currentLeft <= 0 || currentLeft >= maxLeft || currentTop >= maxHeight) {return} else {$(this.move_target_gy).offset({'top': currentTop,'left': currentLeft});}};callback_gy.call(this, e, posix_gy);}}).mouseup(function (e) {if (!!this.move_gy) {var callback_gy = document.call_up_gy || function () {};callback_gy.call(this, e);$.extend(this, {'move_gy': false,'move_target_gy': null,'call_down_gy': false,'call_up_gy': false});}});var $box = $('.tishiEm').mousedown(function (e) {let offset = $(this).offset();this.posix_gy = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };if (!$(e.target).hasClass('ismove')) {      // 只允许蓝色区域可拖动return;} else {$.extend(document, { 'move_gy': true, 'move_target_gy': this });}}).on('mousedown', '#coor', function (e) {var posix_gy = {'w': $box.width(),'h': $box.height(),'x': e.pageX,'y': e.pageY};$.extend(document, {'move_gy': true, 'call_down_gy': function (e) {//下方为最小宽高  同步上方css$box.css({'width': Math.max(300, e.pageX - posix_gy.x + posix_gy.w),'height': Math.max(220, e.pageY - posix_gy.y + posix_gy.h)});}});return false;});
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/132651.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 LoRA 和 QLoRA 对大型语言模型进行参数高效的微调

概述 随着我们深入研究参数高效微调 (PEFT) 的世界,了解这种变革性方法背后的驱动力和方法变得至关重要。在本文中,我们将探讨 PEFT 方法如何优化大型语言模型 (LLM) 对特定任务的适应。我们将揭开 PEFT 的优点和缺点,深入研究 PEFT 技术的复杂类别,并破译两种卓越技术的内…

OpenAI开发系列(二):大语言模型发展史及Transformer架构详解

全文共1.8w余字&#xff0c;预计阅读时间约60分钟 | 满满干货&#xff0c;建议收藏&#xff01; 一、介绍 在2020年秋季&#xff0c;GPT-3因其在社交媒体上病毒式的传播而引发了广泛关注。这款拥有超过1.75亿参数和每秒运行成本达到100万美元的大型语言模型&#xff08;Large …

springboot集成excel导入导出

1、引入依赖 <dependency><groupId>com.pig4cloud.excel</groupId><artifactId>excel-spring-boot-starter</artifactId><version>1.2.7</version> </dependency> 2、导出 ResponseExcel(name "测试列表") Post…

FFmpeg深入学习

文章目录 前言一、FFmpeg 基础指令二、FFmpeg 应用之视频播放器1、音视频播放流程2、音视频同步 三、FFplay 播放器1、FFmpeg 播放器的整体框架2、ffplay 的初体验及快捷键3、ffplay 模块划分4、ffplay 原理及流程 四、FFmpeg 编解码及转码1、FFmpeg 转码全流程简介2、FFmpeg 转…

JetBrains设置inline hint的背景色、前景色

如题。修改IDE的hint前景色和背景色。 修改后结果&#xff1a;

redis深度历险 1 - Redis基础数据结构-001

Redis有5种基础数据结构&#xff0c;分别为: string (字符串)、list(列表)、set (集合)、hash (哈希&#xff09;和zset (有序集合)。熟练掌握这5种基本数据结构的使用是Redis 知识最基础也最重要的部分&#xff0c;它也是在 Redis面试题中问到最多的内容。 1 字符串 string …

【论文阅读】MARS:用于自动驾驶的实例感知、模块化和现实模拟器

【论文阅读】MARS&#xff1a;用于自动驾驶的实例感知、模块化和现实模拟器 Abstract1 Introduction2 Method2.1 Scene Representation2.3 Towards Realistic Rendering2.4 Optimization3.1 Photorealistic Rendering3.2 Instance-wise Editing3.3 The blessing of moduler des…

【深度学习】 Python 和 NumPy 系列教程(十八):Matplotlib详解:2、3d绘图类型(4)3D曲面图(3D Surface Plot)

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 2、3d绘图类型 0. 设置中文字体 1. 3D线框图&#xff08;3D Line Plot&#xff09; 2. 3D散点图&#xff08;3D Scatter Plot&#xff09; 3. 3D条形图&#xff08;3D Bar Plot&#xff09; 4. 3D曲面图…

VMware vCenter 从6.7跨版本升级至7.0U3N

本文尝试使用 vCenter Server Appliance 管理界面 (VAMI) 进行对vCenter Server Appliance7应用进行小版本升级&#xff0c;从6.7.0.47000升级到7.0.3.01600&#xff08;7.0U3N&#xff09;。 一、升级前的准备工作 1、检查当前运行环境&#xff08;当前为6.7.0.47000&#x…

【数据结构-树】AVL树

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

MFC中嵌入显示opencv窗口

在MFC窗体中建立一个Picture Control控件,用于显示opencv窗口 在属性中设置图片控件的资源ID为IDC_PIC1 主要的思路: 使用GetWindowRect可以获取图片控件的区域 使用cv::resizeWindow可以设置opencv窗口的大小,适合图片控件的大小 使用cvGetWindowHandle函数可以获取到ope…

Flutter 通过BottomSheetDialog实现抖音打开评论区,内容自动上推、缩放效果

一、先来看下实现的效果 实现上面的效果需要解决俩个问题 当列表进行向下滑动到顶部的时候&#xff0c;继续滑动可以让弹窗向下收起来弹出上下拖动的时候&#xff0c;视图内容跟着上下移动、缩放大小 二、实现弹窗上下滑动的时候&#xff0c;动态改变内容区的位置和大小 通过…

PPT 生成整数序列字典序的r-组合算法

生成整数序列字典序的r-组合算法 一、PPT效果展示二、问题2.1 简述2.2 算法简述2.3 例子 三、PPT实现 一、PPT效果展示 二、问题 2.1 简述 给定一个整数序列 (1&#xff0c;2&#xff0c;3&#xff0c;…n)&#xff0c;输出其所有字典序的r-组合&#xff0c;注意事项&#xf…

前端html原生页面兼容多端H5和移动端适配方案

目录 图片代码最后 图片 是一个注册页面 代码 自己查看效果 注意: 单位全部用rem这样才能保证兼容性适配多端&#xff0c;px转rem转换公式 1px 1/37.5rem 所以想要20px应该对应20/37.5 0.53rem <!DOCTYPE html> <html lang"en"><head><met…

关于时空数据的培训 GAN:实用指南(第 01/3 部分)

第 1 部分&#xff1a;深入了解 GAN 训练中最臭名昭著的不稳定性。 一、说明 GAN 是迄今为止最受欢迎的深度生成模型&#xff0c;主要是因为它们最近在图像生成任务上产生了令人难以置信的结果。然而&#xff0c;GAN并不容易训练&#xff0c;因为它们的基本设计引入了无数的不稳…

可变参数JAVA

public class Main {public static void main(String[] args) {//方法形参的个数是可以变化的//格式&#xff1a;属性类型...名字System.out.println(getSum(1,2,3,4,5,6,7,8));}//通过键值对对象来遍历&#xff1b;public static int getSum(int a,int...args){//可变参数;int…

ArcGIS 10.7安装教程!

软件介绍&#xff1a;ArcGIS是一款专业的电子地图信息编辑和开发软件&#xff0c;提供一种快速并且使用简单的方式浏览地理信息&#xff0c;无论是2D还是3D的信息。软件内置多种编辑工具&#xff0c;可以轻松的完成地图生产全过程&#xff0c;为地图分析和处理提供了新的解决方…

【蓝桥杯选拔赛真题60】Scratch旋转风车 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch旋转风车 一、题目要求 编程实现 二、案例分析 1、角色分析

Linux自动化构建项目工具——Makefile/makefile

目录 一&#xff0c;背景知识 二&#xff0c;makefile/Makefile的编写 1.创建makefile/Makefile文件 2.在Makefile文件里写编译代码 3.伪目标——.PHONY 1.伪目标的特点 2.怎样实现总是被执行 4.Makefile/makefile文件的不同编写风格 1.背景知识 2.改写 一&#xff0c;背…

goaccess 日志分析 nginx

分析命令&#xff1a; goaccess -a -d -f /mnt/winshare/access-2023070112.log -p goaccess.conf -o /mydata/nginx/html/2023070112_new.html分析日志时的参数 goaccess使用参数详解-a 开启 UserAgent 列表。开启后会降低解析速度 -c 在程序开始运行时显示 日志/日期 配…