您的位置：首页 > Web前端 > JQuery

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

2016-07-03 21:49 706 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航