首页 > 编程知识 正文

html自适应屏幕宽度,html表格自适应宽度

时间:2023-05-05 12:54:04 阅读:252385 作者:3227

业余结了一个小单子,html的作业,但是需要用DW做热点图,电脑也没有那玩意,就用淘宝热点图做了。后来发现图片比我屏幕还宽,body出现了滚动轴,如果改成百分比,热点图就错位了。于是就用js控制了。

图片加载前获取图片的原始宽度,这个时候,算出视窗宽度与图片宽度的比例Cp。

用dom查询area节点,获取coord属性。

每个属性乘上CP比例。

再setAttribute就好了。

 

代码:注意这列将图片宽度设置为100%!important。

//全图状态下定位var defaultMaps = [ [585,170,787,239], [212,172,351,238], [1031,174,1230,245], [798,173,1026,244], [1238,172,1426,242], [1439,173,1635,241]];var areas = document.querySelectorAll('area');for (var m = 0; m < areas.length; m++) { areas[m]}console.log(areas[0].coords);console.log(areas.length);// 图片地址var img_url = '关于.png'// 创建对象var img = new Image()// 改变图片的srcimg.src = img_url// 加载完成执行img.onload = function(){ // 打印 var cuWidth = document.body.clientWidth ; var cp = cuWidth / img.width ; console.log("cp:"+cp); console.log( document.body.clientWidth ); for (var i = 0; i < defaultMaps.length; i++) { for (var n = 0; n < defaultMaps[i].length; n++) { console.log(defaultMaps[i][n]); defaultMaps[i][n] = defaultMaps[i][n] * cp; console.log(defaultMaps[i][n]); } areas[i].setAttribute('coords',defaultMaps[i]); }};

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。