Question

我的代码存在两个问题：

我想将脚本的效果限制为div <div id="photo">
如何为脚本创建子图层，以便在触发动画时页面中的所有元素都不会改变位置。

这是我的代码，希望你能提供帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
                .selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
                #cret {
                    position:relative;
                    z-index:3;
                    border-style:solid; border-width:5px; border-color:#000000;
                    padding: 10px 10px 10px 10px;
                    margin:auto;
                    width:620px;
                    height:420px;
                }
                img {
                    position:static;
                    z-index:1;
                }
            </style>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
        </head>

        <body>
            <script type="text/javascript"/>
                $(document).ready(function() {
                    $('img').width('10%').height('10%');

                    $('img').on("click", function() {
                        $(this).wrap('<div id="cret"/>');
                        $(this).animate({width:'600px', height:'400px'}).addClass("selected");
                    });

                    $(document).on("click", function(){
                        $("img").unwrap();
                    });

                    $('img').click(function(){ return false; });    

                    $('#cret').click(function(){ return false; });

                    $(document).on("click", function(){
                        $('img').animate({width:'10%', height:'10%'}).removeClass("selected");
                    });

                    $('img').click(function(){ return false; });

                    $('#cret').click(function(){ return false; });
                });
            </script>

            <div id="photo">
                <img src="image source"/>
                <img src="image source"/>
            </div>
    </body>
</html>

Answer 1

要限制选择器的范围，可以指定更精确的jquery选择器而不是$（'img'）$（'#photo img'）;它只会影响照片id div中的img。

你应该检查你的选择器，动画将更有效地用于正确的... 比如把你的动画只放在img.selected上。

希望它有助于http://api.jquery.com/category/selectors/

如何添加包装并绑定到某个元素

1 个答案: