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

缩放 div

  缩放 div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><style>.scalable-div {width: 400px;height: 700px;background-color: #3498db;margin: 0 auto;transition: transform 0.3s ease;transform-origin: bottom center;}</style>
</head>
<body class="flex flex-col items-center justify-center h-screen bg-gray-100"><button id="scaleButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">缩放 div</button><div class="scalable-div mt-4">54654654645<img src='https://pic.tupian168.com/meinv/img/20250405/3orfnuibznv.jpg' style='max-height:133px;'/></div><script>const scaleButton = document.getElementById('scaleButton');const scalableDiv = document.querySelector('.scalable-div');let isScaled = false;scaleButton.addEventListener('click', () => {if (isScaled) {scalableDiv.style.transform = 'scale(1)';} else {scalableDiv.style.transform = 'scale(0.5)';}isScaled = !isScaled;});</script>
</body>
</html>

  

http://www.hskmm.com/?act=detail&tid=21253

相关文章:

  • 死锁的概念
  • 【2025-09-29】团队合作
  • 杂凑算法学习笔记
  • pg库支持扩展postgis
  • kuboard部署启用3个etcd(k8s单个master)
  • 数据库服务分布架构(MyCAT)
  • 题解:P14038 [PAIO 2025] Adventure Plan
  • 20231414_王仕琪_密码技术密码杂凑算法学习笔记
  • web3D、webGL、webGPU、webGIS、webXR、webCodecs的概念和对比 - 实践
  • Claude code的 thinking on/off差别有多少
  • Ubuntu 25的网络配置
  • 2025.9.26 测试
  • 贝叶斯学习笔记 - 详解
  • Ubuntu 24和25配置apt国内源
  • 实用指南:AWS实战:轻松创建弹性IP,实现固定公网IP地址
  • 完整教程:自然语言处理项目之情感分析(下)
  • 还在为安装PS发愁?这款网页版工具,打开浏览器就能用!
  • 委托相关
  • 清除“请允许观看视频”通知页面的完整指南
  • 千亿芯片公司被股东“抛弃” ,AI芯片第一股前景几何?
  • Java 与智慧港口:航运调度与物流枢纽数字化
  • DeepSeek-V3.2-Exp 发布,训练推理提效,API 同步降价
  • 图片任意切割工具(Python 3.8 实现)
  • 从零构建能自我优化的AI Agent:Reflection和Reflexion机制对比详解与实现
  • 超精简的小型C编译器
  • Day1 Linux 入门:9 个核心命令(whoami/id/pwd 等)
  • 9.29 闲话
  • MMU的作用
  • 大二学计算机系统基础
  • 20250929 之所思 - 人生如梦