js拖动图片代码

mingl11 2010-11-05 04:54:54

今天做了个jquery的图片缩放拖动的功能，基本兼容所有的浏览器。

但在火狐和ie8里拖动有点问题，当第一次按下鼠标拖动时没有问题，但当第二次按下鼠标拖一下鼠标就会变成这样

就拖不动放开鼠标图片就随鼠标移动。想不通是怎么回事，请教大家帮忙。。。

效果预览：http://www.jzhllxs.net/MovePic.htm

代码



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <style type="text/css">

        #imgBox

        {

            width: 200px;

            height: 200px;

            background: red;

            overflow: hidden;

            margin: auto;

            position: relative;

        }

        #imgMain

        {

            position: relative;

            top: -200px;

        }

    </style>

    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

        $(function () {

            var event;

            if ($.browser.mozilla) {

                event = "DOMMouseScroll";

            }

            else {

                event = "mousewheel";

            }

            $("#divBlock").bind(event,

        function (e) {

            var evt = window.event || e;

            var newWidth;

            var newHeight;

            var newLeft;

            var newTop;

            var overHeight = $("#divBlock").height();

            if (evt.detail > 0 || evt.wheelDelta < 0) {

                newWidth = $("#imgMain").width() - 20;

                newHeight = $("#imgMain").height() - 20;

                newLeft = $("#imgMain").position().left + 10;

                newTop = $("#imgMain").position().top + 10 - overHeight;

            }

            else {

                newWidth = $("#imgMain").width() + 20;

                newHeight = $("#imgMain").height() + 20;

                newLeft = $("#imgMain").position().left - 10;

                newTop = $("#imgMain").position().top - 10 - overHeight;

            }



            $("#imgMain").css({ left: newLeft + "px", top: newTop + "px" });



            $("#imgMain").width(newWidth);

            $("#imgMain").height(newHeight);

        }

        );



            $("#divBlock").bind("mousedown", function (e) {

                var xo = e.pageX;

                var yo = e.pageY;

                var imgLeft = $("#imgMain").position().left;

                var imgTop = $("#imgMain").position().top;

                var overHeight = $("#divBlock").height();

                $("#divBlock").bind("mousemove", function (e) {

                    var x = e.pageX;

                    var y = e.pageY;



                    var bX = $("#imgBox").offset().left;

                    var bY = $("#imgBox").offset().top;



                    $("#imgMain").css("left", x - bX - (xo - bX) + imgLeft);

                    $("#imgMain").css("top", y - bY - (yo - bY) - overHeight + imgTop);

                });



            });



            $("#divBlock").bind("mouseup mouseout", function () {

                $("#divBlock").unbind("mousemove");

            });



        });

    </script>

</head>

<body>

    <div id="imgBox">

        <div style="width: 200px; height: 200px; cursor: pointer; position: relative; left: 0;

            top: 0; filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; background: blue;

            z-index: 999;" id="divBlock">

        </div>

        <img src="test.jpg" width="200" height="200" alt="" id="imgMain" />

    </div>

</body>

</html>

...全文

181 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

cloudgamer 2010-11-06

打赏
举报

你要清除选择
拖动时加上
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
详细可以看这里的拖动效果

mingl11 2010-11-06

打赏
举报

顶起。。。。

mingl11 2010-11-06

打赏
举报

[Quote=引用 4 楼 cloudgamer 的回复:]
你要清除选择
拖动时加上
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
详细可以看这里的拖动效果
[/Quote]

OK la...谢谢高手解答啊哈哈结贴