以div中心为原点向四周放大

最新推荐文章于 2022-11-14 10:27:46 发布
最新推荐文章于 2022-11-14 10:27:46 发布
阅读量2.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39764635/article/details/87936392
版权 
<div class="a1">
<div class="abc"></div>
</div>
<style>
.a1{width:100px; height:100px; margin:200px auto;}
.abc{width:100px;height:100px;background:#f00; position:relative; transition:.5s}
.abc:hover{width:120px; height:120px; margin:-10px 0 0 -10px}
</style>
qq_39764635
关注
CSS之缩放
qq_34550459的博客
04-17 760
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css3 transition 实现div以中心为原点以圆形向四周扩展
百慕大
09-06 900
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hoverSlideout Demo</title> <style type="text/css"> .container { width: 400px; height: 100px; .
html图片从中心放大,【求助】div里的图片怎么实现中心放大效果？
weixin_35919125的博客
05-31 397
参考https://www.jb51.net/article/...，修改了代码如下：但是出来的效果是左上开始的放大的效果怎么在div里的img实现中心的放大效果呢？functionfangda(){varpic=$('.picturesimg');varwValue=20+pic.width();varhValue=20+pic.height();pic.ani...
html图片由中心点逐渐放大,JQuery控制图片由中心点逐渐放大效果
weixin_36132766的博客
06-03 442
有的时候我们需要做一个当鼠标放置在图片上的时候，希望图片逐渐变大，即图片的width和height逐渐变大，但是此时，其left值与top值没有改变，故看似不是从中心点进行缩放的。如下图：从中心点进行缩放实现代码如下：#div1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; ...
div js 缩放方法
leixu1027的博客
05-31 1万+
话不多说，上代码，要的就是那种直接可以运行的的，ok的 zoomElement(elmnt) { if (elmnt.addEventListener) { // IE9, Chrome, Safari, Opera elmnt.addEventListener('mousewheel', MouseWheelHandler, ...
将div定位到视口中心的3种常见方法
venene_的博客
11-27 844
将div定位到视口中心的2种常见方法 1.已知div宽高，通过计算定位到视口中心 <div></div> position: absolute; //先让div继承视口50%的宽高，此时div最左上角应该在视口最中心的位置 //然后移动div自身宽高的一半 left:50% top:50%; left:100px; top:100px; /* 也可以使用calc函数一步到位 通过calc计算出需要移动的值
svg平移、放大、缩小及js操作svg
12-19 7509
在svg图形中，很重要的概念就是坐标系。首先分析一下width、height、viewBox这三个属性。 width:宽度，这个宽度是指在页面中实际使用的大小，跟div中定义width是同样的含义。 height：高度，含义同上。 viewBox:视图框，是一个由字符串表示的，格式："0 0 2050 1000",--->(ULCx ULCy UUwidth UUheight) ULC
CSS学习
one_duck的博客
10-23 188
CSS学习与总结部分官方参考手册CSS基础部分定义选择器选择符优先级样式表应用CSS文字相关内容文字相关属性CSS的长度单位CSS的颜色表示CSS盒子模型浮动与分栏布局定位CSS背景 部分官方参考手册 参考一 参考二 参考三 CSS基础部分 定义 由 ①选择符(selector)②属性(propertise)③取值(value) 构成 格式：selector{ property: value} 例: h1{ color: blue} 说明：若属性的值是多个单词，必须在值上加引号. 例：p{ font-fa
web学习笔记
热门推荐
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
幕客学习CSS3全面基础知识点
zoucanfa的博客
01-02 843
CSS基础什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览
【前端之旅】CSS三万字总结
孙不坚1208
11-16 2545
一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Node.js、Vue、axios、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。 【前端之旅】Web基础与开发工具 【前端之旅】HTML 大总结 CSS 三万字总结一、CSS简介1、什么是CSS2、CSS的好处及作用3、CSS的初体验二、基本用法1、CSS语法模板2、CSS引用方式2.1 行内样式2.2 内部样式2.3 外部样式2.4 引入方式总结3、选择器3.1 标签选择器3.2 .
一行代码实现F11的功能，即让浏览器窗口全屏
baifu2766的博客
04-07 6283
1、全屏 //全屏 var docElm = document.documentElement; //W3C if(docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if(docElm.mozRequestF...
vue 实现图片以鼠标为中心放大，并可以随意在div内拖动
qq_40247562的博客
08-12 1792
vue 实现图片以鼠标为中心放大，并可以随意在div内拖动
CSS实现图片以中心缩放 --- 20/03/18
HimeYui的博客
04-12 7905
CSS图片以中心缩放、放大，超出隐藏 HTML代码： <div> <img src="#"> </div> CSS代码： <style> .container{ width: 100%; overflow: hidden; position: relative; } .container im...
HTML|CSS3学习知识点笔记
qq_38966550的博客
11-14 1074
说明：此文档仅用于作者日常代码问题查询，可供任何人交流学习，全文截图自原作者(B 站千锋前端)的视频内容 HTML 选择器权重 🔺文本属性 网页浏览器支持的字体 列表属性 背景属性 background-size 控制图片大小 【bg-size】cover属性 是等比例放大并拉伸铺满，可能会使图片丢失部分 【bg-size】contain属性 把图片拓展到最大尺寸，使其宽度和高度完全适应内容区域，但是可能会铺不满会留白 复合写法： 顺序是可以变换的 浮动属性 清浮动 清除浮动效果
用hover元素，scale中心点放大效果
lili1122212的博客
12-25 7322
在做页面练习时，需要把图片从中心点放大，一开始是设置img的宽、高，hover以后再设置一个大于原img的宽、高， 这样做虽然效果也出来了，只是不是中心点放大，是从左上角放大，达不到想要的效果。 在百度上找了一下都没有适合的方法，问了老师，他的方法是在hover里使用vertical-align: middle; 还是没有什么用， 在试了几次后，我把vertical-align: midd
三个div中间的可以缩放
woxiaole_521的博客
11-13 1314
结构： class="box"> class="left"> class="cont"> class="right"> css:样式 .box{ width: 100%; height: 300px; float: left; position: relative; display: inline-b
div常用效果方法-transform
weixin_30788731的博客
12-23 737
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div:first-of-type{ width: 200px; height: 200px; back...
一个div里面有多个机柜，实现以鼠标当前位置为原点缩放
最新发布
05-19
要实现以鼠标当前位置为原点缩放，可以使用以下步骤： 1. 获取鼠标当前位置相对于div的坐标，可以使用event.clientX和event.clientY获取鼠标的绝对位置，再减去div的左上角的坐标，即可得到相对于div的坐标。 2. 根据缩放比例计算出新的机柜大小。假设当前机柜大小为w和h，缩放比例为s，那么新的机柜大小为w * s和h * s。 3. 计算鼠标在缩放后的机柜中的位置。假设鼠标相对于div的坐标为(x, y)，缩放前机柜左上角的坐标为(x0, y0)，缩放后机柜左上角的坐标为(x1, y1)，那么鼠标在缩放后的机柜中的坐标为((x - x0) * s + x1, (y - y0) * s + y1)。 4. 根据缩放后的机柜大小和鼠标在缩放后的机柜中的位置，重新设置机柜的大小和位置。 下面是一个示例代码，假设机柜的class为cabinet： ```javascript const div = document.getElementById('div'); const cabinets = document.getElementsByClassName('cabinet'); div.addEventListener('wheel', (event) => { event.preventDefault(); // 阻止默认滚动事件 const mouseX = event.clientX - div.getBoundingClientRect().left; const mouseY = event.clientY - div.getBoundingClientRect().top; const scale = event.deltaY > 0 ? 0.9 : 1.1; // 根据滚动方向计算缩放比例 Array.from(cabinets).forEach(cabinet => { const rect = cabinet.getBoundingClientRect(); const x0 = rect.left - div.getBoundingClientRect().left; const y0 = rect.top - div.getBoundingClientRect().top; const w = rect.width; const h = rect.height; const s = scale; const x1 = (mouseX - x0) * s + x0; const y1 = (mouseY - y0) * s + y0; const w1 = w * s; const h1 = h * s; cabinet.style.width = `${w1}px`; cabinet.style.height = `${h1}px`; cabinet.style.left = `${x1}px`; cabinet.style.top = `${y1}px`; }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值