注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

JS图片放大 缩小  

2016-09-08 10:15:17|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<html>
<HEAD>
<title>鼠标拖动图片</title>
    <script src="js/jquery-1.8.2.min.js"></script>
     <script src="js/jquery.mousewheel.js"></script>
    <style type="text/css">
       <!-- .dragme {
                position:relative;
            background:url(images/1.jpg) no-repeat;
           background-size:60% 80%;
   -moz-background-size:60% 80%;
   -webkit-background-size:60% 80%;
   -o-background-size:60% 80%;
            zoom:100%;
            z-index:1000;
            width:960px;
            height:650px;
        }
-->
    </style>
<script type="text/javascript">
    var ie = document.all;
    var nn6 = document.getElementById && !document.all;
    var isdrag = false;
    var x, y;
    var dobj;

    // 缩放图片  
    function imgToSize(oBool) {
        var oImg = document.all('dragme');
        oImg.style.zoom = parseInt(oImg.style.zoom) + (oBool ? 2 : -2) + '%';
    }


    function movemouse(e) {
        if (isdrag) {
            dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
            dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
            return false;
        }
    }

    function selectmouse(e) {
        var fobj = nn6 ? e.target : event.srcElement;
        var topelement = nn6 ? "HTML" : "BODY";
        while (fobj.tagName != topelement && fobj.className != "dragme") {
            fobj = nn6 ? fobj.parentNode : fobj.parentElement;
        }
        if (fobj.className == "dragme") {
            isdrag = true;
            dobj = fobj;
            tx = parseInt(dobj.style.left + 0);
            ty = parseInt(dobj.style.top + 0);
            x = nn6 ? e.clientX : event.clientX;
            y = nn6 ? e.clientY : event.clientY;
            document.onmousemove = movemouse;
            return false;
        }

    }
    document.onmousedown = selectmouse;
    document.onmouseup = new Function("isdrag=false");

    
    $(function () {
        function log(msg) {
            $('#logger').append('<p>' + msg + '<\/p>')[0].scrollTop = 999999;
        }

        var loghandle = function (event, delta) {
            var o = '', id = event.currentTarget.id || event.currentTarget.nodeName;

            o = '#' + id + ':';

            if (delta > 0)
                o += ' up (' + delta + ')';
            else if (delta < 0)
                o += ' down (' + delta + ')';

            if (event.deltaY > 0)
                o += ' north (' + event.deltaY + ')';
            else if (event.deltaY < 0)
                o += ' south (' + event.deltaY + ')';

            if (event.deltaX > 0)
                o += ' east (' + event.deltaX + ')';
            else if (event.deltaX < 0)
                o += ' west (' + event.deltaX + ')';

            o += ' deltaFactor (' + event.deltaFactor + ')';

            log(o);
        };

        $('#dragme')
            .mousewheel(function (event, delta) {
                //loghandle(event, delta);
                //log('pageX: ' + event.pageX + ' pageY: ' + event.pageY);
                if (delta > 0) {
                    imgToSize(1);
                }
                else {
                    imgToSize(0);
                }
            });
    });
</script>
</HEAD>
<BODY>
<div align="center">
  <div id="dragme" class="dragme" name="dragme" style="position:relative; zoom:100%;cursor:move;">
       <img  src="images/2.jpg" style="position:absolute;width:25px; height:28px; left:35px;top:150px;"/>

  </div>
    <!--<img src="images/1.jpg" class="dragme" id="oImg" style="position:relative; zoom:100%; cursor:move;">-->
   
</div>
     <div style="position:relative; z-index:1000;">  
      <input type="button" value="放大" onClick="imgToSize(1);">  
      <input type="button" value="缩小" onClick="imgToSize(0);">  
      <input type="button" value="旋转" onClick="imgRoll();">  
      <input type="button" value="水平翻转" onClick="imgReverse('H');">   
      <input type="button" value="垂直翻转" onClick="imgReverse('V');">   
          <div id="logger"></div>
   </div>  
</body>
</html>
  评论这张
 
阅读(57)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017