当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js 滚轮控制图片缩放大小和拖动

js 滚轮控制图片缩放大小和拖动

2018年11月20日  | 移动技术网IT编程  | 我要评论 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style>
    .dragable {
        position: relative;
        cursor: move;
    }
    
    .img-con {
        position: relative;
        width: 713px;
        height: 455px;
        overflow: hidden;
        border: 1px solid red;
    }
    </style>
</head>

<body>
    <p class="img-con"><img src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" class="dragable" /></p>
    <script type="text/javascript" charset="utf-8">
    window.onload = function() {
            var oimg = document.getelementsbytagname("img")[0];
            function fnwheel(obj, fncc) {
                obj.onmousewheel = fn;
                if (obj.addeventlistener) {
                    obj.addeventlistener('dommousescroll', fn, false);
                }

                function fn(ev) {
                    var oevent = ev || window.event;
                    var down = true;

                    if (oevent.detail) {
                        down = oevent.detail > 0
                    } else {
                        down = oevent.wheeldelta < 0
                    }

                    if (fncc) {
                        fncc.call(this, down, oevent);
                    }

                    if (oevent.preventdefault) {
                        oevent.preventdefault();
                    }

                    return false;
                }


            };
            fnwheel(oimg, function(down, oevent) {

                var oldwidth = this.offsetwidth;
                var oldheight = this.offsetheight;
                var oldleft = this.offsetleft;
                var oldtop = this.offsettop;

                var scalex = (oevent.clientx - oldleft) / oldwidth; //比例
                var scaley = (oevent.clienty - oldtop) / oldheight;

                if (down) {
                    this.style.width = this.offsetwidth * 0.9 + "px";
                    this.style.height = this.offsetheight * 0.9 + "px";
                } else {
                    this.style.width = this.offsetwidth * 1.1 + "px";
                    this.style.height = this.offsetheight * 1.1 + "px";
                }

                var newwidth = this.offsetwidth;
                var newheight = this.offsetheight;

                this.style.left = oldleft - scalex * (newwidth - oldwidth) + "px";
                this.style.top = oldtop - scaley * (newheight - oldheight) + "px";
            });
        }
        <!--
        //拖拽
    var ie = document.all;
    var nn6 = document.getelementbyidx && !document.all;
    var isdrag = false;
    var y, x;
    var odragobj;

    function movemouse(e) {
        if (isdrag) {
            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") {
            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 = new function("isdrag=false");
    </script>
</body>

</html>

只缩放

 <!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<img border="0" src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" onmousewheel="return rollimg(this)">
</body>
<script language="javascript">
function rollimg(o){
   /* 获取当前页面的缩放比
       若未设置zoom缩放比，则为默认100%，即1，原图大小
   */ 
   var zoom=parseint(o.style.zoom)||100;
   /* event.wheeldelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
       wheeldelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
   */
   zoom+=event.wheeldelta/12;
   /* 如果缩放比大于0，则将缩放比加载到页面元素 */
   if (zoom>0) o.style.zoom=zoom+'%';
   /* 如果缩放比不大于0，则返回false，不执行操作 */
   return false;
}
</script>
</html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网