【无标题】求一个思路，可否把一个DIV作为整体对象做放大缩小的效果

最新推荐文章于 2023-02-21 15:37:55 发布
最新推荐文章于 2023-02-21 15:37:55 发布
阅读量1k 收藏
点赞数
分类专栏： 其它 python人工智能:智慧河长制(泉舟时代) 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40631247/article/details/122719076
版权
探讨如何使用CSS3实现一个DIV元素及其内容（包括图片和文字）在鼠标悬停时按比例放大，离开时恢复原状的效果。论坛用户讨论了通过jQuery处理IMG放大缩小以及使用CSS的zoom属性来尝试实现DIV的放大效果。
摘要由CSDN通过智能技术生成

求一个思路，可否把一个DIV作为整体对象做放大缩小的效果

azt2233
2013-05-08 04:39:45

我已经做到用jquery的hover把IMG的图片做到放大缩小，就是鼠标移动到图片上图片变大鼠标移走后图片变回来。代码应该很多人都见过，很简单。

那个col是一个大的DIV的id。
现在我想的是如果不是IMG，而是一个DIV呢，这个DIV里面有图片有文字，然后这个DIV还有background属性。
我想做到复数的长方形DIV一行行排下来，然后鼠标移动到一个DIV就按照比例变大，离开就变回去，这样的效果。
请问这样的能够实现吗，我最想要的是DIV里面的文字和图片元素也随着DIV的变大而变大或者不变大但是能够移动。
2 条回复
切换为时间正序
当前发帖距今超过3年，不再开放新的回复
发表回复

Assassin_ 2013-05-08
div肯定是控制不了img的。 只能拆开两个obj 来操作

天际的海浪 2013-05-08
用css的zoom试试
相关推荐
html设置字体整体放大,请教怎么样可以只放大或缩小内容层里的字体呢？我不想让整页都放大缩小。请指教！谢谢！_html/css_WEB-ITnose…
回复讨论(解决方案)JS改变区域font-size或者分别写几个style，JS控制切换fontbig{font-size:16px;}fontnormal{font-size:14px;}fontsmall{font-size:12px}代码好乱，给个jquery的参考一下吧：…其一：直接…
flex布局实现叠在另一个div之上_CSS之flex布局
一、flexbox弹性盒模型属性flex布局是一种一维布局模型，一次只能处理一

最低0.47元/天 解锁文章
「已注销」
关注
专栏目录
登陆页面的布局，登陆背景图片无法铺满div
msGGK的博客
10-14 673
解决方式： 使用 background-size: cover; 图片无法铺满div， 临时找到使用 background-attachment: fixed;铺满盒子。 不过有一个小问题就是 在页面放大的时候，因为 background-attachment: fixed 不会随着页面放大而放大，会出现放大情况下铺不满div .login-box { width: 540px; height: 300px; border-radius: 3px; background:
Div放大效果
11-12
Div放大效果的javascript源码
css3让div整体放大
keleinclude_的博客
11-26 3015
transform：scale(1.5) 整体放大1.5倍
html css div实现整体布局,HTMLCSSDIV实现整体布局.docx
weixin_35816805的博客
06-03 146
HTMLCSSDIV实现整体布局?HTML CSS + DIV实现整体布局1、技术目标：开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局2、什么是W3C标准？ W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护Web行业标准 W3C标准包括一系列的标准：HTML内容方面：XHTML样式美化方面：CSS?结构文档访问方面：DOM页...
html将区域放大缩小,用js实现的一个小程序（对一块区域的放大，缩小）
weixin_34688784的博客
06-16 541
//css#enlarge1{position:absolute;width:100px; height:100px; border:1px solid#000;}#enlarge2{position:absolute; top:100px; width:100px; height:200px;margin-top:20px; border:1px solid #000; }#enlarge3{p...
Javascript操作div及其内含对象示例
weixin_33970449的博客
06-30 162
设置div的绝对位置和是否显示代码： <html> <head> <script type="text/javascript"> function showDiv(obj) { // 保存元素 var el = obj; // 获得元素的左偏移量 var left = obj...
threejs效果记录
蛋蛋老公的博客
08-18 4212
/ 使用SceneUtils创建多材质对象 let mesh = new THREE . SceneUtils . createMultiMaterialObject(geometry , materials);}
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 3911
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
animate.css源码分析--bounce(弹跳效果)
热门推荐
woollllll
11-09 1万+
animate.css是一个不错CSS3预设动画库,是很好的CSS3动画学习资源,下面来剖析下bounce效果的实现原理,在此基础上实现自己的CSS动画。 先从animate.css把bounce效果单独移出来，暂不考虑针对不同的浏览器的支持,测试浏览器为chrome,看一下效果。 html> head> title>bounce-sourcetitle> meta ch
html之div整体缩小,如何整体放大或缩小div元素
weixin_35793018的博客
06-01 5056
满意答案xiaocat92014.08.20采纳率：52%等级：7已帮助：211人实现div层的放大与缩小，参考实例如下：.content{border: 1px solid #ccc;width: 440px;overflow: hidden;margin: 10px;}$(document).ready(function() {if ($('#content').height() &g...
vue3 div实现鼠标拖拽放大缩小
前端小白成长记
02-21 2333
vue3 div实现鼠标拖拽放大缩小
Vue3 echarts 图表跟随窗口自适应大小
m0_56153940的博客
02-23 4160
<template> <div class="box"> <Breadcrumb name="数据统计"/> <el-card> <div ref="echartsRef" id="main" :style="`height:${$attrs.height || 400}px;width:${$attrs.width + 'px' || '70%'} 800px; `"></div> &.
vue放大缩小div_vue 快速给图片添加，点击旋转、放大、缩小、拖动的效果
weixin_30093045的博客
01-30 1898
:style="{transform:'scale('+multiples+')',transformOrigin:'top left'}"> alt="":style="{transform:'rotateZ('+deg+'deg)'}">放大缩小旋转export default{data(){return{imgSrc:'https://publish-pic...
如何查看文件夹里有几张图片_如何整理电脑里的10000张图片？这些整理技巧你不得不学...
weixin_39725885的博客
12-06 3383
很多摄影爱好者的电脑里都屯了成千上万张图片，如果没有好好做整理的话，当要找某一张图片的时候就如同大海捞针，费时费力。所以做好图片整理是摄影爱好者们不得不学习的，大量的图片整理起来也是一个大工程，今天小编就来分享几个图片整理的小妙招，大家来看看哪种方法更适合你~1、按时间整理当我们电脑里的图片特别多的时候，我们可以按先按时间来分类，按时间分类也有一定的小窍门，我们可以先设一小段一小段的时间区间，先不...
H5 + Vue3 + TS 实现元素拖拽、缩放、旋转
biaov
03-09 2553
拖拽 思路 利用 touch 事件来获取元素移动的位置，通过设置元素的样式(top,left)来控制元素的移动 拖拽点移动距离 = 移动实时坐标 - 初始坐标 元素移动距离 = 元素初始值 + 拖拽点移动距离 实现 绑定属性 <template> <div :style="`top:${rect.y}px;left:${rect.x}px;`" @touchstart="onTouchstart" @touchmove="onTouchmove"></div>
div常用效果方法-transform
weixin_30788731的博客
12-23 738
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div:first-of-type{ width: 200px; height: 200px; back...
手动设置div的放大缩小
super_XYQ的博客
12-28 3343
通过按钮设置div的缩放： 放大： const obj = document.getElementById('tableMain'); // 一开始默认是100% let zoom = parseInt(obj.style.zoom, 10) || 100; // 设定范围 if (zoom >= 10 && zoom <= 130) { obj.style.zoom = zoom + 10 +'%'; } 缩小： const obj = document..
div根据屏幕缩放进行比例缩放
偷得浮生半日闲
08-13 3650
在一些视频类网站，视频的 div 宽度会跟随浏览器的大小进行比例缩放，一般来说，我们 div 设置宽度 100% ， 高度写死，宽度可以根据屏幕缩小而改变 div 的宽度，但是高度不会变化，如果想要 div 的高度也随着宽度的变化而变化呢？......
帮我写一个鼠标滚轮控制放大缩小 鼠标长按拖动div
最新发布
04-19
以下是一个简单的示例代码，可以实现鼠标滚轮控制放大缩小和鼠标长按拖动div的功能： HTML代码： ``` <div id="container"> </div> ``` CSS代码： ``` #container { width: 500px; height: 500px; overflow...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值