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>
扫一扫
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
