路由器上建网站,网站设计云匠网,饶阳网站建设,成都小程序开发报价给这个图片添加摄像头图标#xff0c;并获取图标的坐标值#xff0c;也就是图标的css样式是positon:absolute,获取left和top的值。 图片1 思路是这样的#xff0c;获取这里的长度#xff0c; 图片2 1.鼠标点击时距浏览器的左边距离和上边距离#xff0c;相当于(0,0)坐标 …给这个图片添加摄像头图标并获取图标的坐标值也就是图标的css样式是positon:absolute,获取left和top的值。 图片1 思路是这样的获取这里的长度 图片2 1.鼠标点击时距浏览器的左边距离和上边距离相当于(0,0)坐标
let x e.clientX;
let y e.clientY;
2.图片距浏览器顶部的距离
let imgTop $(.imageBox img).offset().top;
let imgLeft $(.imageBox img).offset().left;
3.就能获取到图片2中箭头的距离即鼠标点击的位置距背景图顶部的距离
let cursorTop y - imgTop;
let cursorLeft x - imgLeft;
4.计算得出图标的left和top值这里是%。
let width $(.imageBox img).width();
let height $(.imageBox img).height();
let left (cursorLeft/width*100).toFixed(2)
let top (cursorTop/height*100).toFixed(2)
5.效果如下图但是鼠标点击处是图标的左上角感觉好像是差一点 6.应该让鼠标点击处是图标的中心就需要获取图标中心的坐标然后 减去图片2中箭头的距离。
//设置添加的小图标的center为中心点
let pointLeft $(.imageBox .block).width()*0.5;
let pointTop $(.imageBox .block).height()*0.5;//鼠标点击无差距
let xData cursorLeft - pointLeft;
let yData cursorTop - pointTop; 7. 完整代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle.imageBox{width: 800px;position: relative;overflow: hidden;margin: 5% 2%;}.imageBox img{width: 100%;height: 100%;}.imageBox .block{width: 3%;height: 4%;background: url(camera.png) 0 0 no-repeat;background-size: 100% 100%;position: absolute;}/style/headbodydiv classpagediv classimageBoximg srchttps://img0.baidu.com/it/u3593454291,2854711423fm253fmtautoapp138fJPEG?w800h500 div classblock/div/div/divscript srcjquery.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(.imageBox).click(function(e){//鼠标点击时距浏览器的左边距离和上边距离相当于(0,0)坐标let x e.clientX;let y e.clientY;//图片的宽高let width $(.imageBox img).width();let height $(.imageBox img).height();//图片距浏览器顶部的距离let imgTop $(.imageBox img).offset().top;let imgLeft $(.imageBox img).offset().left;//鼠标点击的位置距背景图顶部的距离let cursorTop y - imgTop;let cursorLeft x - imgLeft;//设置添加的小图标的center为中心点let pointLeft $(.imageBox .block).width()*0.5;let pointTop $(.imageBox .block).height()*0.5;//鼠标点击无差距let xData cursorLeft - pointLeft;let yData cursorTop - pointTop;let left (xData/width*100).toFixed(2)let top (yData/height*100).toFixed(2)console.log(x);console.log(y);// let html div classblock styletop: ${top}%;left: ${left}%;/div// $(.imageBox).append(html);$(.imageBox .block).css({top:top%})$(.imageBox .block).css({left:left%})})/script/body
/html
