css3中的zoom属性以及jquery中css()方法操作元素的属性

深藏阁楼爱情的钟 2022-09-23 03:47 243阅读 0赞

css3中的zoom设置元素缩放比例;

例如ydi

\{

width:300px;

height:300px;

zoom:5

\}

元素放大到五倍，再用jquery的方法取得元素的width,height时，$("div").width()或$("div").height()时元素的属性width,height还是300px;

另外$("div").css(\{width:'+100px;',height:'+100px'\}) 和$("div").animate(\{left:'+100px'\})(zoom:xx的值不能为负值可以为相对值)在设置css的属性值时可以使用相对值。

这样就可以设子一个按钮来一直放大与元素，也可以设置一个按钮来一直缩小元素。

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">  
</script>  
<style>  
\#div1  
\{  
display:block;  
width:300px;  
height:300px;  
background-color:red;  
\}  
</style>  
  
  
<script>  
$(document).ready(function(e) \{  
    $("\#btn").click(  
function()  
\{  
var txt="width:"+$("\#div1").width();  
txt+="<br/>"+"height:"+$("\#div1").height();  
$("\#div2").html(txt);  
\}  
);  
$("\#btn2").click(  
function()  
\{  
$("\#div1").css(\{zoom:2\});  
\}  
);  
$("\#btn3").click(  
function()  
\{  
$("img").css(\{width:"+=100px",height:"+=80px"\});  
\}  
);  
$("\#btn4").click(  
function()  
\{  
$("img").css(\{width:"-=50%",height:"-=30%"\});  
\}  
);  
$("\#btn5").click(  
function()  
\{  
$("img").css(\{zoom:'+=2'\});  
\}  
)  
  
\});  
  
  
  
  
</script>  
  
  
  
  
</head>  
  
  
<body>  
<div id="div1">i am libo</div>  
<input type="button" id="btn" value="点击">&nbsp;<input type="button" id="btn2" value="设置">&nbsp;  
<input type="button" id="btn3" value="放大">&nbsp;<input type="button" id="btn4" value="缩小">&nbsp;  
<input type="button" id="btn5" value="设置zoom">  
<div id="div2"></div>  
<dl>  
<dt>中国城市</dt>  
<dd><img src="maID.jpg" width="100px" height="100px"><dd>

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 相同的css属性_CSS中的标题侧属性

css 相同的css属性 CSS | 字幕端属性 (CSS | caption-side Property) Introduction: 介绍： We deal w

绝地灬酷狼/ 2023年03月05日 12:54/ 0 赞/ 46 阅读

相关 css opacity属性_CSS中的opacity属性

css opacity属性 CSS | 不透明度属性 (CSS | opacity Property) With the growing need of making

冷不防/ 2023年03月05日 09:59/ 0 赞/ 44 阅读

相关 css3中的zoom属性以及jquery中css()方法操作元素的属性

css3中的zoom设置元素缩放比例; 例如ydi \{ width:300px; height:300px; zoom:5 \} 元素放大到五倍，再用jquer

深藏阁楼爱情的钟/ 2022年09月23日 03:47/ 0 赞/ 244 阅读

相关 CSS3中的calc( )属性--可以计算的属性

语法： calc() = calc(四则运算) 说明：（1）calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()

超、凢脫俗/ 2022年06月14日 05:21/ 0 赞/ 279 阅读

相关浅谈 css的zoom属性

zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。不过值得注意的一点就是火

不念不忘少年蓝@/ 2022年05月29日 12:56/ 0 赞/ 1341 阅读

相关 jQuery中的属性与CSS

基本属性 attr > 原作：西岭老湿、凌风 <body> <input type="button" id="btu" value="点击">

短命女/ 2022年05月18日 02:50/ 0 赞/ 217 阅读

相关 CSS的zoom属性

一介绍 zoom属性用于设置或检索对象的缩放比例。其对应的样式标签属性为zoom属性。语法： zoom : normal | number normal：使用对象

一时失言乱红尘/ 2022年05月12日 00:18/ 0 赞/ 203 阅读

相关 jQuery-CSS类属性操作

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 re

àì夳堔傛蜴生んèń/ 2022年04月16日 00:08/ 0 赞/ 271 阅读

相关给伪元素的css属性动态赋值以及获取css属性值

一/ 设置值就是动态添加style $('head').append($('<style class="styleBefore">.leveltwo-scroll

灰太狼/ 2022年04月04日 05:28/ 0 赞/ 1375 阅读

相关 CSS的zoom属性使用以及其他浏览器不兼容问题

在开发过程中,由于整个页面设计完后效果偏大,于是百度了找到了CSS的相关属性 zoom属性 transform:scale() 这两个都可以使得整个页面进行缩小

客官°小女子只卖身不卖艺/ 2021年09月25日 05:24/ 0 赞/ 1131 阅读