devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：不正经 | 2024-03-21 11:22:57

赞

踩

css zoomwidth

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="点击"> <input type="button" id="btn2" value="设置"> 
<input type="button" id="btn3" value="放大"> <input type="button" id="btn4" value="缩小"> 
<input type="button" id="btn5" value="设置zoom">
<div id="div2"></div>
<dl>
<dt>中国城市</dt>
<dd><img src="maID.jpg" width="100px" height="100px"><dd>







声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/280871
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。