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

kbx8916發表於2016-07-03
CSSS3OOMjQuery

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>







相關文章