V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
loginv2
V2EX  ›  JavaScript

关于浏览器坐标定位兼容的一些奇怪问题求助

  •  
  •   loginv2 · 2015-04-29 00:34:51 +08:00 · 2466 次点击
    这是一个创建于 3590 天前的主题,其中的信息可能已经有所发展或是发生改变。
    先上代码
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>模版</title>
    <style>
    /* reset */
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    pre,code,kbd,samp{font-family:inherit;}
    q:before,q:after{content:none;}
    textarea{overflow:auto;resize:none;}
    label,summary{cursor:default;}
    a,button{cursor:pointer;}
    h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
    del,ins,u,s,a,a:hover{text-decoration:none;}
    body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
    body{background:#fff;}
    a,a:hover{color:#333;}
    /*自定义样式*/
    html,body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Helvetica,Tahoma,Arial,STXihei,"STHeiti Light","Microsoft YaHei",SimSun,SimHei,sans-serif;
    }
    #course_select{width:100%;}
    #course_select tr td{text-align:center;}
    </style>
    <script src="http://dwz.cn/jquery111"></script>
    </head>
    <body>
    <table id="course_select">
    <tr>
    <td style="width:70%;"><br/>前面blablablablablablabla
    <div style="display:inline-block;"><img src="http://p5.yokacdn.com/pic/star/topic/2014/U230P1T1D925309F9DT20140519091616.jpg" id="img"></div>
    后面blablablablablablablablablablablabla
    </td>
    <td style="width:30%;">
    <div>
    <p>在图片上产生一个矩形的遮罩</p>
    <p>首先将焦点定位在start输入框 然后点击图片上要产生的矩形的左上角位置</p>
    <p>再将焦点定位在end输入框,最后点击图片上要产生矩形的右下角位置</p>
    <p> 点击 计算 可预览效果</p>
    <p>点击 清除 可关闭预览效果</p>
    <label><h3>start</h3></label>
    <input type="text" id="start" style="zoom: 2;">
    </div>
    <div style="margin-top:5px;">
    <label><h3>end</h3></label>
    <input type="text" id="end" style="zoom: 2;">
    </div>
    <div style="margin-top:5px;">
    <button id="OK">计算</button>
    <button id="clear">清除</button></div>
    </td>
    </tr>
    </table>
    <script>
    var mousePosition = function(ev) {
    if (ev.offsetX || ev.offsetY){
    return {x: ev.offsetX,y: ev.offsetY};
    }else if (ev.layerX || ev.layerY) {
    return {x: ev.layerX,y: ev.layerY};
    }else{
    console.log(ev);
    return {x:(ev.clientX-ev.currentTarget.offsetLeft),y:(ev.clientY-ev.currentTarget.offsetTop)}
    //return false;
    }
    }
    $(document).ready(function(){
    var point = "start";
    $("#start,#end").css({"border": "1px solid #00bc3e"});
    //图片的事件
    $("#img").click(function(e){
    //获取鼠标当前位置
    var mouse_coordinates = mousePosition(e);
    console.dir(mouse_coordinates);
    $("#"+point+"").val([mouse_coordinates.x,mouse_coordinates.y].join());
    return false;
    });
    //控件输入定位
    $("#start,#end").click(function(){
    $("#start,#end").css({"border": "1px solid #00bc3e"});
    point = $(this).attr("id");
    $("#"+point).css({"border": "1px solid #aa0000"});
    return false;
    });
    //计算输入的矩形
    $("#OK").click(function(){
    var start = $("#start").val();
    var end = $("#end").val();
    if( start.match(/^\d+,\d+$/) === null || end.match(/^\d+,\d+$/) === null ){
    alert("坐标的值错误,请重新确认后计算");
    return false;
    }
    start = start.split(",");
    end = end.split(",");
    var width = end[0]-start[0];
    var height= end[1]-start[1];
    if(width<=0 || height<=0){
    alert("坐标必须是[左上][右下]两个点,请确认位置");
    return false;
    }
    var top = parseInt(start[1]);
    var left = parseInt(start[0]);
    $("#img").parent().css("position","relative");
    var html = "<div style=\"width:"+width+"px;height:"+height+"px;background:rgba(255, 0, 0, 0.56);position: absolute;top:"+top+"px;left:"+left+"px;\">&nbsp;</div>";
    $("#img").parent().append(html);
    return false;
    });
    $("#clear").click(function(){
    $("#img ~ div").remove();
    return false;
    });
    });
    </script>
    </body>
    </html>
    view raw gistfile1.txt hosted with ❤ by GitHub

    我想制作一个给图片加部分遮罩的功能
    但是目前遇到了两个问题实在无力解决 遂来求助

    问题1 在IE9下 个功能失灵(离谱的是 当打开开发人员工具的时候 功能正常了)
    问题2 在最新版的Firefox(37.0.2)下 第一次使用是正常的,但是点击清除按钮以后,再次生成的遮罩定位就不准了

    以上问题在chrome下并没有发现 实在不知如何解决 求各路高手出出主意
    4 条回复    2015-05-16 19:32:13 +08:00
    emric
        1
    emric  
       2015-04-29 03:32:01 +08:00   ❤️ 1
    1. OFFSETX AND OFFSETY.
    2. 正则问题, 没有考虑小数点.

    https://gist.github.com/17/afaa1e1ca27c043b6d41
    loginv2
        2
    loginv2  
    OP
       2015-04-29 07:10:43 +08:00
    非常感谢 问题已解决
    但是没理解问题2的结果
    为何会产生小数,单位不是像素么?
    ledzep2
        3
    ledzep2  
       2015-04-29 08:51:45 +08:00
    以后发前端求助最好用codepen之类的啊.
    flowfire
        4
    flowfire  
       2015-05-16 19:32:13 +08:00
    @loginv2 谁说像素不可能产生小数的。。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1013 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:05 · PVG 04:05 · LAX 12:05 · JFK 15:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.