js用按钮控制左右移动效果

给你参考：<html>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(function(){
var imgId = "img1";
var dist = 100;// 一次移动10px
var interval = 200;// 动画完成时间

// div内部的宽度、高度
var containerWidth = $("#container").innerWidth();
var containerHeight = $("#container").innerHeight();

$("#option input").each(function(){
$(this).click(function(){
var curButton = $(this);
var type = curButton.attr("id");

var img = $("#" + imgId);

// 判断是否触壁
var moveDist = getMoveDist(img, type);

// 移动
move(img, type, moveDist);
});
});

function getMoveDist(img, type){
var moveDist = dist;
var curDist = 0;
if (type == "Left" || type == "Top") {
curDist = getMargin(img, type);
if (curDist - dist < 0) {
moveDist = curDist;
}
}
else if (type == "Right") {
curDist = getMargin(img, "Left")+ img.outerWidth();
if (curDist + dist > containerWidth) {
moveDist = containerWidth - curDist;
}
}
else if (type == "Down") {
curDist = getMargin(img, "Top")+ img.outerHeight();
if (curDist + dist > containerWidth) {
moveDist = containerWidth - curDist;
}
}


return moveDist;
}

function move(img, type, dist) {
if (type == "Left") {
img.animate({marginLeft:'-=' + dist + 'px'}, interval);
}
else if (type == "Right") {
img.animate({marginLeft:'+=' + dist + 'px'}, interval);
}
else if (type == "Top") {
img.animate({marginTop:'-=' + dist + 'px'}, interval);
}
else if (type == "Down") {
img.animate({marginTop:'+=' + dist + 'px'}, interval);
}
}

function getMargin(obj, type) {
var sef = 0;

var value = parseInt(obj.css("margin" + type));
if (!value) {
value = 0;
}

return value;
}
});
</script>
<body>
<div id="container" style="border:1px solid #000; font-size:0; height:500px; width:500px;">
<img id="img1" src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" style="border:1px solid #000; margin:0;" />
</div>
<div id="option">
<input type="button" value="上" id="Top" />
<input type="button" value="下" id="Down" />
<input type="button" value="左" id="Left" />
<input type="button" value="右" id="Right" />
</div>
</body>
</html>

解决方案 »

  1.   

    2楼的碰撞处理的不够精细啊。
    上下左右的点击事件中，因为移动是动画，很容易出现图片被点出边界外的情况。
    当点击速度快过动画速度的时候（比如连续点击‘右’），图片就会超出右边界。
    改进了下代码，解决了上述bug（没有精简代码：））：<html>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script>
    $(function(){
        var imgId = "img1";
        var dist = 100;// 一次移动10px
        var interval = 200;// 动画完成时间
        
        // div内部的宽度、高度
        var containerWidth = $("#container").innerWidth();
        var containerHeight = $("#container").innerHeight();
        
        $("#option input").each(function(){
            $(this).click(clickAction);  
        });
        function clickAction(){
            var curButton = $(this);
            var type = curButton.attr("id");
            
            var img = $("#" + imgId);
        
            // 判断是否触壁
            var moveDist = getMoveDist(img, type);
            
            // 移动
            move(img, type, moveDist);
        }
        
        function getMoveDist(img, type){
            var moveDist = dist;
            var curDist = 0;
            if (type == "Left" || type == "Top") {
                curDist = getMargin(img, type);
                if (curDist - dist < 0) {
                    moveDist = curDist;
                }
            }
            else if (type == "Right") {
                curDist = getMargin(img, "Left")+ img.outerWidth();
                if (curDist + dist > containerWidth) {
                    moveDist = containerWidth - curDist;
                }
            }
            else if (type == "Down") {
                curDist = getMargin(img, "Top")+ img.outerHeight();
                if (curDist + dist > containerWidth) {
                    moveDist = containerWidth - curDist;
                }
            }
            
            
            return moveDist;
        }
        
        function move(img, type, dist) {
            $('#'+type).unbind('click', clickAction);
            if (type == "Left") {
                img.animate({marginLeft:'-=' + dist + 'px'}, interval, function(){
                    $('#'+type).bind('click', clickAction);
                });
            }
            else if (type == "Right") {
                img.animate({marginLeft:'+=' + dist + 'px'}, interval, function(){
                    $('#'+type).bind('click', clickAction);
                });
            }
            else if (type == "Top") {
                img.animate({marginTop:'-=' + dist + 'px'}, interval, function(){
                    $('#'+type).bind('click', clickAction);
                });
            }
            else if (type == "Down") {
                img.animate({marginTop:'+=' + dist + 'px'}, interval, function(){
                    $('#'+type).bind('click', clickAction);
                });
            }
        }
        
        function getMargin(obj, type) {
            var sef = 0;
        
            var value = parseInt(obj.css("margin" + type));
            if (!value) {
                value = 0;
            }
            
            return value;
        }
    });
    </script>
    <body>
    <div id="container" style="border:1px solid #000; font-size:0; height:500px; width:500px;">
        <img id="img1" src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" style="border:1px solid #000; margin:0;" />
    </div>
    <div id="option">
        <input type="button" value="上" id="Top" />
        <input type="button" value="下" id="Down" />
        <input type="button" value="左" id="Left" />
        <input type="button" value="右" id="Right" />
    </div>
    </body>
    </html>
      

  2.   

    看不懂哇！到底你发一个html的不就完事了