图片放大时实现鼠标拖动查看完整图片功能

原创 2016年06月01日 15:04:34
<!doctype>
<html>
<meta charset="UTF-8">


<head >
    <title>图片缩放和固定div层拖动</title>
    <style type="text/css">
      #picDiv
        {
        margin:8px 8px 4px 0;
        border:1px solid #666666;
        padding:0;
        width:1024px;
        height:768px;
        float:left;
        overflow:hidden;
        position:relative;
        cursor:move;
        }


     .dragAble
        {
            position: absolute;
            cursor: move;
        }
    </style>


    <script language="javascript" type="text/javascript">
        //图片放大和缩小(兼容IE和火狐,谷歌)
        function ImageChange(args) {
            var oImg = document.getElementById("pic");
            if (args) {
                oImg.width = oImg.width * 1.2;
                oImg.height = oImg.height * 1.2;
               // oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%';
            }
            else {
                oImg.width = oImg.width / 1.2;
                oImg.height = oImg.height / 1.2;
            }
        }


/*
*鼠标拖动功能
*/


        //获取div的四个顶点坐标
           function getDivPosition()
           {
           var odiv=document.getElementById('picDiv');
//alert(odiv.getBoundingClientRect().left);
         // alert(odiv.getBoundingClientRect().top);
              
           var xLeft,xRigh,yTop,yBottom;
           return {
                xLeft:odiv.getBoundingClientRect().left,
                xRigh:odiv.getBoundingClientRect().left+1024, 
                yTop:odiv.getBoundingClientRect().top,
                yBottom:odiv.getBoundingClientRect().top+768
                };
           }


         //获取鼠标坐标
           function mousePos(e)
           {
                var x,y;
                var e = e||window.event;
                return {
                x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
                y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
//鼠标坐标+页面滚动距离
};
            };


        //在固定div层拖动图片
        var ie = document.all;
        var nn6 = document.getElementById && !document.all;

        var isdrag = false;
        var y, x;
        var oDragObj;


        
        //鼠标移动
        function moveMouse(e) {
                //鼠标的坐标
                mousePos(e).x   ;
                mousePos(e).y  ;
                //div的四个顶点坐标
                getDivPosition().xLeft
                getDivPosition().xRigh
                getDivPosition().yTop
                getDivPosition().yBottom                 
            if(isdrag && mousePos(e).x > getDivPosition().xLeft &&  mousePos(e).x < getDivPosition().xRigh  &&  mousePos(e).y >getDivPosition().yTop && mousePos(e).y< getDivPosition().yBottom )
            {
                oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
                oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
                return false;
            }
        }


        //鼠标按下才初始化
        function initDrag(e) {
            var oDragHandle = nn6 ? e.target : event.srcElement;
            var topElement = "HTML";
            while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
//img                        html dragAble
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
            }
            if (oDragHandle.className == "dragAble") {
                isdrag = true;
                oDragObj = oDragHandle;
                nTY = parseInt(oDragObj.style.top + 0);
                y = nn6 ? e.clientY : event.clientY;
                nTX = parseInt(oDragObj.style.left + 0);
                x = nn6 ? e.clientX : event.clientX;
                document.onmousemove = moveMouse;
                return false;
            }
        }
        document.onmousedown = initDrag;
        document.onmouseup = function(){ //new Function("isdrag=false");//两者都可以将其变为false
        isdrag=false;
        };


     </script>


</head>
<body>
    <div id="picDiv" >
        <img id="pic"  class="dragAble" alt="头像" src="Desert.jpg" />
    
    </div>


     <input id="btn1" type="button" value="放大" onclick="ImageChange(true)" />
     <input id="btn2" type="button" value="缩小" onclick="ImageChange(false)" />
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

每3秒轮换下一张图片,鼠标可以选中数字换图片,在网上找了好多js写的代码,但是粘上之后总是实现不了效果,这是完整代码,粘上之后完全能使用,方便大家使用(这是jquery实现的翻动功能,需要先下载个jq

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">       h...

Jquery实现鼠标移动,放大图片的功能

做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果。上网查查代码,修改了一个简单版的。    使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和J...

鼠标点击图片放大功能 源代码

  • 2011年07月18日 16:08
  • 220KB
  • 下载

js实现图片滚轮放大缩小以及鼠标拖动

主要功能:实现点击小图查看大图。 首先打开一个界面window.showModalDialog("/jsp/showPic.jsp",dir,"dialogHeight:" + screen.hei...

c# WPF 中图片缩放功能,鼠标拖动位置

c# WPF 中图片缩放功能,鼠标拖动位置

利用JS实现基本的图片轮播功能,包括鼠标的经过事件

js实现简单的轮播效果包括鼠标经过事件,只做参考不能作为代码直接使用

JavaScript开发——加载在线图片完整功能实现方法(正在加载-加载成功-加载失败)

在开发中,我们加载一些不是本地的图片的时候,在加载的时候我们需要显示等待动画,加载完成等待动画消失,如果加载失败则显示加载失败的提示。 之前有篇是CSS——实现图片等比例正方形显示,宫格排列http:...

上传图片预览功能的IE浏览器兼容性问题的实现:JS+JQuery+CSS完整版

上传图片,最令人头痛的,不是功能的实现,而是IE浏览器的兼容性问题。IE浏览器是每一个前段开发人员的痛。好了,废话不多说,上代码,可以兼容IE8/IE10/谷歌浏览器,目前已经测试的是这2个浏览器。如...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片放大时实现鼠标拖动查看完整图片功能
举报原因:
原因补充:

(最多只允许输入30个字)