图片热区自适应和设置热区边框

  <!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>

图片热区自适应和设置热区边框相关推荐

小程序图片高度自适应和设置text行高
小程序图片设置宽度100%后宽度能自适应,但是发现高度一直有个240的高度控制,需要通过属性 mode="widthFix"设置 text便签直接设置行高没用,需要在父级标签上设置 ...
关于HTML图片如何设置热区
最近在学习HTML,老师布置了一些作业,我以为HTML都很简单,但作业要求里出现了"设置热区链接",我翻遍课本都没有提及,我就上网查资料,发现deamweaer可以不用代码设置,特 ...
html中热区如何设置,Dreamweaver中如何设置热区?DW设置热区方法图解
Dreamweaver中如何设置热区?下面小编就为大家详细介绍一下,一起来看看吧! 方法/步骤向平时一样,这里我们在设置Dreamweaver热区的时候.同样这里是需要建立一个新的HTML界面的. ...
html设置图片与边框的距离,css图片如何设置上边框距离
在css中,可以使用padding-top属性来设置图片的上边框距离,只需要给图片元素添加"padding-top:距离值;"样式即可.padding-top属性可以设置元素的上内 ...
Android Glide加载圆形图片，设置圆形边框
Glide加载图片,Glide可以很方便的实现圆形加载并且也还可以设置变色边框. 关于Glide的加载在这里不详细说了,主要说一下自定义BitmapTransformation来实现圆形图片加载 st ...
pyqt设置按钮边框
设置背景颜色: https://blog.csdn.net/jacke121/article/details/108327378 设置按钮样式示例: import sys from PyQt5.QtW ...
设置表格边框为1px的方法
下面是网页制作中八种设置表格边框为1px的方法: 第一种: 使用1*1的图片,来填充单元格背景,并设置单元格的宽度,高度为1px 第二种: <html> <body> < ...
java如何设置圆角边框_巧妙实现带圆角的渐变边框
如何实现下面这个渐变的边框效果: 这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意. border-image border-image 是 CSS 规范 CSS Backgrounds ...
html怎么给图片加鼠标滑过效果,jquery给图片添加鼠标经过时的边框效果
一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可错误代码如下:注意红色部分设置 (出发点 ...

图片热区自适应和设置热区边框

图片热区自适应和设置热区边框相关推荐

最新文章

热门文章