让图片热点更聪明：自适应热区与边框设定
最编程
2024-02-12 21:55:49
...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style data-merge-styles="true"></style>
<title>
图片热区自适应 和热区边框
</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
img {
width: 100%;
height: 100vh;
}
</style>
<script type="text/javascript" language="javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//报纸图片加载完毕
function loadcomplete() {
}
</script>
<div style="position:relative;">
<img id="KnMap" src="0001.jpg" border="0" usemap="#map01" onload="loadcomplete()">
<div id="group" style="white-space: nowrap;">
</div>
<div id="div_line_collection"></div>
<map name="map01" id="CribMap1">
<area shape="rect" coords="42,324,1003,757" href="./101.html" />
<area shape="rect" coords="42,846,1005,1440" href="./102.html" />
</map>
</div>
<script type="text/javascript">
adjust(1);
var timeout = null; //onresize触发次数过多，设置定时器
window.onresize = function () {
clearTimeout(timeout);
timeout = setTimeout(function () {
window.location.reload();
}, 100); //页面大小变化，重新加载页面以刷新MAP
}
//获取MAP中元素属性
function adjust(id) {
var map = document.getElementById("CribMap" + id);
var element = map.childNodes;
var itemNumber = element.length / 2;
console.log(itemNumber)
for (var i = 0; i < itemNumber - 1; i++) {
var item = 2 * i + 1;
console.log(item)
var oldCoords = element[item].coords;
var newcoords = adjustPosition(oldCoords);
element[item].setAttribute("coords", newcoords);
}
var test = element;
}
//调整MAP中坐标
function adjustPosition(position) {
var pageWidth = document.body.clientWidth; //获取页面宽度
var pageHeith = document.body.clientHeight; //获取页面高度
var imageWidth = 1040; //图片的长宽
var imageHeigth = 1470;
var each = position.split(",");
//获取每个坐标点
for (var i = 0; i < each.length; i++) {
each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString(); //x坐标
i++;
each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString(); //y坐标
}
//生成新的坐标点
var newPosition = "";
for (var i = 0; i < each.length; i++) {
newPosition += each[i];
if (i < each.length - 1) {
newPosition += ",";
}
}
return newPosition;
}
</script>
<SCRIPT LANGUAGE="JavaScript">
loadcomplete();
//全局变量，触摸开始位置
var startX = 0,
startY = 0,
tempX = 0,
tempY = 0;
// var canscroll = 0;
// var canSheetChange = true;
// var pswidth = '1006.299988';
// var psheight = '1574.880005';
// var allSheet = ["./assets/0001.jpg","./assets/0002.jpg","./assets/0003.jpg","./assets/0004.jpg"];
// var sheetData = {};
// var imgwidth = $(window).width();
// var imgheight = $(window).width() * psheight / pswidth;
//touchstart事件
function touchSatrtFunc(evt) {
try {
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
tempX = startX = x;
tempY = startY = y;
} catch (e) {}
}
//绑定事件
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, {
passive: false
});
document.addEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
bindEvent(); //绑定事件
} catch (e) {}
}
window.onload = isTouchDevice;
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//判断滑动方向
var dx = Math.abs(x - startX);
var dy = Math.abs(y - startY);
if (dx > dy) {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
if (x - startX > 20 || x - startX < -20) {
// $("#group").css("left", (parseFloat($("#group").css("left")) + parseFloat(x) - parseFloat(tempX)) + "px");
tempX = x;
}
} else {
}
} catch (e) {
console.log(e);
}
}
function touchEndFunc(evt) {
try {
$("#div_line_collection").html(""); //清空红框
//版面移动归位
console.log(Math.abs(tempX - startX));
console.log(tempX - startX);
if (tempX - startX < 0) {
swiper.slideNext();
return false
}
if (Math.abs(tempX - startX) >= 20) {
swiper.slidePrev();
} else if (Math.abs(tempX - startX) < 20) {
if (evt.target.tagName.toLowerCase() == "area") {
MakeDIV(evt.target);
showCon($(evt.target).attr("href"));
}
} else {
// $("#group").animate({ "left": -1 * imgwidth }, 200);
//触发文章红框
}
} catch (e) {}
}
function showCon(href) {
location.href = href;
}
//文章红色框生成函数
function MakeDIV(obj) {
$("#div_line_collection").html(""); //清空旧的红框
var strs = new Array(); //定义一数组
strs = $(obj).attr("coords").split(",");
var i1, i2;
var div_item = "";
var o1 = -1,
o2 = -1;
var range;
var i_top = 0;
var i_left = 0;
var w = strs[2] - strs[0],
h = strs[3] - strs[1],
top = strs[1],
left = strs[0];
div_item = "<div class='div_line' style=' border: 1px solid #f0432c;position: absolute;width:" + w +
"px;height:" + h +
"px;top:" + top + "px;left:" + left + "px'></div>";
$("#div_line_collection").append(div_item);
}
//多少个版面的显示和隐藏
function pageOn() {
if ($("#div_pagecon").is(":hidden")) {
$("#div_pagecon").show().animate({
left: "0px"
}, 500);
} else {
var temp_w = $(window).width() * 0.25;
$("#div_pagecon").animate({
left: "-" + temp_w + "px"
}, 500, function () {
$("#div_pagecon").hide()
});
}
}
function __doPostBack(eventTarget, eventArgument) {
}
function accAdd(arg1, arg2) {
var r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
}
</SCRIPT>
推荐阅读