Question

我有模态窗口。右侧有复选框列表，另一侧有一些文字。我需要以下内容 - 当我单击复选框时，图片和文本将变为ZOOM-IN。 enter image description here

如何使用jquery执行此操作？

<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">&times;</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>

使用JQuery放大对象

0 个答案: