Javascript 使用JQuery放大对象
我有模态窗口。右边是复选框列表，另一边是带有一些文本的图片。我需要以下内容-当我点击复选框时，图片和文本将被放大一点。 如何使用jquery实现这一点Javascript 使用JQuery放大对象,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我有模态窗口。右边是复选框列表，另一边是带有一些文本的图片。我需要以下内容-当我点击复选框时，图片和文本将被放大一点。 如何使用jquery实现这一点 <script> $("#first_checkbox").change(function () { if ($(this).attr("checked")) { //zoom in all inside ".row" } else {
<script>
$("#first_checkbox").change(function () {
if ($(this).attr("checked")) {
//zoom in all inside ".row"
}
else
{
//zoom out
}
})
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="bootstrap.css" rel="stylesheet" />
<script src="../Scripts/jquery-2.1.0.min.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/jquery-ui-1.10.4.js"></script>
<title>Animation Test</title>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Trigger button for modal window
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" id="myModal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Sed at dignissim mauris?</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="checkbox">
<label>
<input type="checkbox"> Suspendisse in cursus leo, a
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Sed ligula elit, lacinia eget pretium
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Phasellus fermentum fringilla orci
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Mauris interdum, sem non
</label>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-3">
<img src="Images/testimage.png" />
</div>
<div class="col-lg-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut lobortis arcu sit amet commodo suscipit. Nulla fringilla velit erat,
eget tristique elit ultrices eget. Sed cursus nunc in pretium scelerisque.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
$（“#第一个_复选框”）。更改（函数（）{
if（$（this.attr（“选中”））{
//放大所有内部“.row”
}
其他的
{
//缩小
}
})
动画测试
模式窗口的触发按钮
&时代；
莫里斯贵宾酒店？
《卡苏斯·利奥》中的Suspendisse
紫檀
弗氏酵母菌
莫里斯·因特杜姆
Lorem ipsum dolor sit amet，是一位杰出的献身者。
但是，这是一个共同的问题。弗林蒂拉·维利特·埃拉特，
埃吉特·特里斯蒂克精英酒店。塞德·库苏斯·努克在《史前十字勋章》中。