所在位置:杂记 >> javascript >> 通过等分圆周算取圆周上的热点区域
通过等分圆周算取圆周上的热点区域
发表于 四年前(2014-6-11 11:36:53) | 阅读 (3286) | 评论 (0)
JS代码:
(function(){
    var count = 25; /* 等分数量 */
    var baseRadians = (Math.PI/180);
    var radians = baseRadians * (360/count); /* 等分后的弧度值 */
    var outR = 549/2; /* 外圆半径 */
    var ox = outR; /* 圆心x坐标值 */
    var oy = outR; /* 圆心y坐标值 */
    var innR = 452/2; /* 内圆半径 */
    var i = 0, len = count+1, halfLen = len/2;
    var panBoxW = W("#divDotBox"),useMapW = W("#useMap"),prevPos="";
    for(; i < len; i++){
        /* (baseRadians*(halfLen-Math.abs(halfLen-i))/halfLen) 用于修正偏差(距离原点最远时偏差为1弧度) */
        var radVal = radians * i+ (baseRadians*(halfLen-Math.abs(halfLen-i))/halfLen), sinVal = Math.sin(radVal), cosVal = Math.cos(radVal);

        var outX = ox - outR * sinVal;
        var outY = oy - outR * cosVal;
        panBoxW.appendChild("<span style='position:absolute;left:"+(outX)+"px;top:"+(outY)+"px;background:red;width:14px;height:14px; font-size:8px; color:#fff;'>"+(i+1)+"</span>");

        var innX = ox - innR * sinVal;
        var innY = oy - innR * cosVal;
        panBoxW.appendChild("<span style='position:absolute;left:"+(innX)+"px;top:"+(innY)+"px;background:red;width:14px;height:14px; font-size:8px; color:#fff;'>"+(i+1)+"</span>");
        

        prevPos!="" && useMapW.appendChild('<area shape="poly" coords="'+prevPos+','+innX+','+innY+','+outX+','+outY+'" href="###" title="'+(i+1)+'">');
        prevPos=outX+","+outY+","+innX+","+innY;
    }
})();

效果:
圆心
杂记评论(0):
称谓(必填):  网站(选填):
上一篇:解决IE6下边框颜色不支持transparent的问题  下一篇:QWrap.tmpl 方法     <<返回杂记列表