• map area 标签的位置


    使用jQuery获取位置以及大小信息的时候,碰到一个问题:map area取不到offset,width,height等Box模型的数据,查阅了map area的定义后,写了一个兼容的方法,贴在这里给有需要的人,如下:

    var getMapAreaBox = function (area) {
        // parse
        var ret = { left: 0, top: 0,  0, height: 0 };
        var shape = area.attr('shape').toLowerCase(), coords = area.attr('coords').split(',');
        for (var len = coords.length, i = 0; i < len; i++) { coords[i] = parseInt(coords[i], 10); }
        // generate
        if (shape === 'rect' || shape === 'rectangle') {
            ret.left = Math.min(coords[0], coords[2]);
            ret.top = Math.min(coords[1], coords[3]);
            ret.width = Math.abs(coords[2] - coords[0]);
            ret.height = Math.abs(coords[3] - coords[1]);
        } else if (shape === 'circ' || shape === 'circle') {
            var radius = coords[2], x = coords[0], y = coords[1];
            ret.left = (x - radius);
            ret.top = (y - radius);
            ret.width = (radius * 2);
            ret.height = (radius * 2);
        } else if (shape === 'poly' || shape === 'polygon') {
            var x = [], y = [];
            for (var len = coords.length, i = 0; i < len; i++) {
                if (i % 2 === 0) {
                    x.push(coords[i]);
                } else {
                    y.push(coords[i]);
                }
            }
            ret.left = Math.min.apply(null, x);
            ret.top = Math.min.apply(null, y);
            ret.width = Math.max.apply(null, x) - ret.left;
            ret.height = Math.max.apply(null, y) - ret.top;
        }
        // fix
        var map = area.closest('map');
        if (map.length > 0) {
            var img = $('img[usemap~="#' + map.attr('name') + '"]');
            if (img.length === 0) { img = $('img[usemap~="#' + map.attr('id') + '"]'); }
            var pos = img.offset();
            if (pos) {
                ret.top += pos.top;
                ret.left += pos.left;
            }
        }
        // ret
        return ret;
    };
    浏览器没那么聪明!
  • 相关阅读:
    java学习笔记(三)
    JAVA 学习笔记(2)
    java学习笔记
    第二次作业完成情况
    第一次作业完成情况
    使用MarkDown标记语言发博客
    《Java高级程序设计》第一周作业
    纪逝去的毕业后的两年时光
    #这是来联系Markdown语法的
    CodeFirst初体验——问题三
  • 原文地址:https://www.cnblogs.com/rulee/p/2859622.html
Copyright © 2020-2023  润新知