jquery 图片缩放拖动的简单实例

前端技术 2023/09/07 JavaScript

一、不使用jquery，简单的缩放：

复制代码 代码如下:

<HTML>
<HEAD>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
<TITLE>onMouseWheel</TITLE>
<SCRIPT>
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta <= -120)
count--;
return count;
}
function Resize(count){
oImage.style.zoom = count + \'0%\';
oCounter.innerText = count + \'0%\';
}
</SCRIPT>
</HEAD>
<BODY>
<div align=center>
<span style=\"font-weight:bold\">Size =
<span id=\"oCounter\" style=\"color:red;\">100%</span></span>
<img id=\"oImage\" src=\"images/aaa.gif\" onmousewheel=\"return Picture();\" >
</div>
</BODY>
</HTML>

一、使用jquery，实现缩放和拖动：
复制代码 代码如下:

<!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) {

                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                    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>

本文地址：https://www.stayed.cn/item/18272

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案