html热点做相对位置,HTML <map> 标签 多热点定位手机自适应

《续写春天的故事》·区委书记篇

body {

overflow-y: scroll;

overflow-x: hidden;

}

.tab {

position: absolute;

top: 20%;

width: 7%;

}

a {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

outline: none;

-moz-outline-style: none;

}

var width = $("body").width();

var tab1 = ["96", "152", "http://static.scms.sztv.com.cn/ysz/zx/zw/78335105.shtml"];

var tab2 = ["208", "228", "http://static.scms.sztv.com.cn/ysz/zx/zw/78333232.shtml"];

var tab3 = ["346", "196", "http://static.scms.sztv.com.cn/ysz/zx/zw/78332211.shtml"];

var tab4 = ["474", "254", "http://static.scms.sztv.com.cn/ysz/zx/zw/78334179.shtml"];

var tab5 = ["604", "194", "http://static.scms.sztv.com.cn/ysz/zx/zw/924.shtml"];

var tab6 = ["96", "570", "http://static.scms.sztv.com.cn/ysz/zx/zw/78330181.shtml"];

var tab7 = ["214", "612", "http://static.scms.sztv.com.cn/ysz/zx/zw/78329490.shtml"];

var tab8 = ["346", "636", "http://static.scms.sztv.com.cn/ysz/zx/zw/78326846.shtml"];

var tab9 = ["476", "590", "http://static.scms.sztv.com.cn/ysz/zx/zw/78327604.shtml"];

var tab10 = ["600", "628", "http://static.scms.sztv.com.cn/ysz/zx/zw/78336913.shtml"];

var tab11 = ["490", "878", "http://static.scms.sztv.com.cn/ysz/zx/zw/2884.shtml"];

var rate = width / 750;

for (var i = 0; i < 11; i++) {

(function(i) {

var j = i + 1;

var html = '

';

$(".area_tab").append(html);

var idstr = "tab" + j;

var idvalue = eval(idstr); //eval获取变量名

$("." + idstr).css({

"left": rate * idvalue[0] + "px",

"top": rate * idvalue[1] + "px"

});

$("." + idstr).unbind().bind("click", function() {

window.location.href = idvalue[2];

});

})(i);

}

重点：设计图尺寸(750 X 1344)来初始化定位，手机自使用后再次重新计算定位，

重新计算定位后用JS插入HTML代码至页面

var html = '

';

，重新通过JS写入定位CSS代码

"left": rate * idvalue[0] + "px",

"top": rate * idvalue[1] + "px"