                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

这样做为什么不可以？

帮忙看看，这样为什么不可以？

隐匿山猫

2015-08-20

源自：jQuery基础课程 7-13

关注问题我要回答

511

操作

收起

4 回答

Y_du
2015-08-20

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery动画特效</title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
            
        <script type="text/javascript">
            function l(){
                $("div").animate({left:"-=50px"},3000)
            }
            function r(){
                $("div").animate({left:"+=50px"},3000)
            }
        </script>
    </head>
    <style>
        div{
            position:fixed;
            height:100px;
            width:100px;
            background:red;
            border:3px solid green;
            line-height:100px;
            text-align:center;
        }
        #left {
            position: absolute;
            top: 120px;
        }
        #right {
            position: absolute;
            top: 120px;
            left: 60px;
        }
    </style>
    <body>
    <div id="test">快让我漂</div>
    <input id="left" type="button" value="左移" onclick="l()">
    <input id="right" type="button" value="右移" onclick="r()">

    </body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

隐匿山猫提问者

帮我看看下面的代码错在哪了？

2015-08-20 回复有任何疑惑可以回复我~

Y_du 回复隐匿山猫提问者

三个问题，你的div没有定位。 div{ height:100px; width:100px; background:red; border:3px solid green; line-height:100px; text-align:center; } 这个要加定位 position

2015-08-20 回复有任何疑惑可以回复我~

隐匿山猫提问者回复 Y_du

谢谢，终于搞懂了

2015-08-20 回复有任何疑惑可以回复我~

隐匿山猫提问者
2015-08-20

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <title>jQuery动画特效</title>
    </head>
    <style>
        div{
            height:100px;
            width:100px;
            background:red;
            border:3px solid green;
            line-height:100px;
            text-align:center;
        }
        #left{
            position: absolute;
            top: 120px;
        }
        #right{
            position: absolute;
            top: 120px;
            left:60px;
        }
    </style>
    <body>
    <div id="test">快让我漂</div>
    <input id="left" type="button" value="左移" onclick="l()">
    <input id="right" type="button" value="右移" onclick="r()">

    <script type="text/javascript">
        function l(){
            $("div").animate({left:"-=50px"},3000)
        }
        function r(){
            $("div").animate({left:"+=50px"},3000)
        }
    </script>
    </body>
</html>