html图片热热区缩放自适应JS代码

前端 admin 35℃ 0评论

因为前端代码不熟悉,所以临时用图片热区代替链接

但也不能有bug, 所以将按钮自适应,达到适配

        var timeout = null;//onresize触发次数过多,设置定时器
        window.onresize = function () {  
            clearTimeout(timeout);  
            timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化,重新加载页面以刷新MAP  
        }  
  
        //获取MAP中元素属性  
        function adjust(mapid, imageWidth, imageHeigth) {    
            var elements = $("#"+mapid).find('area'); 
            $.each(elements,function(index){
                var newcoords = adjustPosition($(this).attr('coords'), mapid, imageWidth, imageHeigth);  
                $(this).attr("coords", newcoords);
            });
  
        }  
  
        //调整MAP中坐标  
        function adjustPosition(position, imgid, imageWidth, imageHeigth) {
            var curWidth = $('#'+imgid+'-img').width();    
            var curHeith = $('#'+imgid+'-img').height();

            var r = Math.sqrt(Math.pow(imageWidth, 2)+Math.pow(imageHeigth, 2));
            var r1 = Math.sqrt(Math.pow(curWidth, 2)+Math.pow(curHeith, 2));
            var rate = r1/r;

            console.log(rate);
  
            var each = String(position).split(",");  
            var x = each[0];
            var y = each[1];
            var r = each[2];

            x = Math.round(parseInt(x) * rate).toString();
            y = Math.round(parseInt(y) * rate).toString();
            
            console.log(each, x,y,r);
            return x+','+y+','+r;  
        }  

 

转载请注明:朋克网 » html图片热热区缩放自适应JS代码

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址