element不占位置的html标签,element.style.top 在变为什么 对应元素位置可以不变？

于 2021-05-30 23:46:31 发布
阅读量333 收藏
点赞数
文章标签： element不占位置的html标签

html>

Document

*{

margin: 0;

padding: 0;

}

body{

/*height: 1000px;*/

/*position: relative;*/

/*margin:0px;

padding:0px;*/

}

.point {

position: absolute;

border: 5px solid red;

}

.ball{

width:4px;

height:4px;

/*background: #d9fe37;*/

background: red;

border-radius: 50%;

position: absolute;

}

#sketchPad{

/*width: 400px;

height: 400px;*/

/*left: 100px;

top: 100px;*/

/*background-color: #ff0;

overflow: auto;*/

/*position: relative;*/

}

.small{

position: relative;

height: 300px;

overflow: auto;

}

.small img{

height: 300px;

}

#selectImage{

left: 200px;

top: 500px;

position: absolute;

}

.box{

width: 300px;

height: 300px;

margin: 100px;

border: 1px solid #ccc;

position: relative;

/*overflow: auto;*/

}

.big{

width: 600px;

height: 600px;

position: absolute;

top: 0;

left: 560px;

border: 1px solid #ccc;

overflow: auto;

/*display: none;*/

display: block;

background-color: #eee;

}

.big::-webkit-scrollbar{

display: none;

}

.mask{

width: 50px;

height: 50px;

background: rgba(255,255,0,0.4);

position: absolute;

top: 0;

left: 0;

/*鼠标的样式*/

cursor: crosshair;

display: none;

}

.big img{

position: absolute;

height: 3600px; /*box.height*big.width/mask.width */

top: 0;

left: 0;

}

.aim{

position: absolute;

top: 50%;

left: 50%;

width: 20px;

margin-left: -10px;

height: 20px;

margin-top: -10px;

display: block;

/*z-index: 8*/

}

.aim__ver{

position: absolute;

top: 50%;

left: 50%;

width: 2px;

height: 40px;

margin-top: -20px;

margin-left: -1px;

background-color: #f00;

}

.aim__hor{

position: absolute;

top: 50%;

left: 50%;

width: 40px;

height: 2px;

margin-top: -1px;

margin-left: -20px;

background-color: #f00;

}

οnchange="document.form.path.value=this.value;selectImage(this)"

multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" />

创建连线

document.getElementById("myBtn").onclick = function(event) {

document.getElementById("sketchPad").style.cursor="crosshair";

document.getElementById("sketchPad").addEventListener("click", createLine, false);

event.stopPropagation();

// 阻止冒泡

};

// 1. 获取外面的父级盒子

var fdj = document.getElementById("fdj");

// 2.获取小的图片

var small = fdj.children[0];

var smallImage = small.children[0];

// 3.获取容纳大图片的盒子

var big = fdj.children[1];

// 4.获取遮罩

var mask = small.children[1];

// 5.获取大的那张图片

var bigImage = big.children[0];

// 6.鼠标经过小的图片的时候显示

small.onmouseover = function(){

mask.style.display = "block";

big.style.display = "block";

}

// 7. 鼠标离开时隐藏

small.onmouseout = function(){

mask.style.display = "none";

big.style.display = "none";

}

console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft);

var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2);

var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2);

function createLine() {

var sketchPad=document.getElementById("sketchPad");

var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2);

var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2);

// console.log("sketchPad_scrollLeft",sketchPad.scrollLeft);

let radius=2;//半径

let pointHtmlStr = `

sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr;

let firstPoint = {};

firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft;

firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop;

// console.log("firstPoint1:"+firstPoint.xPoint);

function createPoints(event) {

var sketchPad=document.getElementById("sketchPad");

let secondPoint = {};

secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft;

secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop;

let lineLength = calcLine(firstPoint, secondPoint);

let angle = getAngle(

firstPoint.xPoint,

firstPoint.yPoint,

secondPoint.xPoint,

secondPoint.yPoint

);

// 设置一个div 宽度为 两点之间的距离，并且以 transform-origin: 0 50% 为圆心旋转，角度已经算出来

let lineHtmlStr = `

// let bodyDiv = document.getElementsByTagName("body")[0];

// // 添加到body 后面

// bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr;

sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr;

// 取消本段的起始点的监听

document.getElementById("sketchPad").removeEventListener("click", createPoints);

}

// 计算连线长度

function calcLine(firstPoint, secondPoint) {

// 计算出两个点之间的距离

let line = Math.sqrt(

Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) +

Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2)

);

// console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint);

// console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint);

// console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint);

// console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint);

console.log("line:",line);

return line;

}

// 计算角度

// 获得人物中心和鼠标坐标连线，与x轴正半轴之间的夹角

function getAngle(x1, y1, x2, y2) {

// 获得人物中心和鼠标坐标连线，与x轴正半轴之间的夹角

var x = x1 - x2;

var y = y1 - y2;

var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

var cos = y / z;

var radina = Math.acos(cos); // 用反三角函数求弧度

var angle = 180 / (Math.PI / radina); // 将弧度转换成角度

if (x2 > x1 && y2 === y1) {

// 在x轴正方向上

angle = 0;

}

if (x2 > x1 && y2 < y1) {

// 在第一象限;

angle = angle - 90;

}

if (x2 === x1 && y1 > y2) {

// 在y轴正方向上

angle = -90;

}

if (x2 < x1 && y2 < y1) {

// 在第二象限

angle = 270 - angle;

}

if (x2 < x1 && y2 === y1) {

// 在x轴负方向

angle = 180;

}

if (x2 < x1 && y2 > y1) {

// 在第三象限

angle = 270 - angle;

}

if (x2 === x1 && y2 > y1) {

// 在y轴负方向上

angle = 90;

}

if (x2 > x1 && y2 > y1) {

// 在四象限

angle = angle - 90;

}

return angle;

}

// 解决第一次绑定的时候执行方法

// setTimeout(function() {

// document.removeEventListener("click", createPoints);

// 添加节点

document.getElementById("sketchPad").addEventListener("click", createPoints, false);  // 在冒泡过程中处理函数

// }, 0);

}

//加载任意图片

function selectImage(file) {

if (!file.files || !file.files[0]) {

return;

}

var reader = new FileReader();

reader.onload = function (evt) {

document.getElementById('imageID').src = evt.target.result;

document.getElementById('imageIDBig').src = evt.target.result;

image = evt.target.result;

}

reader.readAsDataURL(file.files[0]);

}

// 8 鼠标移动

// var x = 0;

// var y = 0;

small.onmousemove = function(event){

// console.log("mask_display = ", mask.style.display);

// console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width);

var event = event || window.event;

// 9.获取在盒子内部的坐标    本身定位了，这里换用父亲边框到body边框的距离  显示在遮罩的中间

var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ;

var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop;

console.log("x = ",x);

console.log("y = ",y);

// console.log("mask_width=",mask.style)

// 10.增加限制条件

if(x < 0){

// x = 0;

}else if(x > small.offsetWidth - mask.offsetWidth){

// x = small.offsetWidth - mask.offsetWidth;

}

if(y < 0){

// y = 0;

}else if(y > small.offsetHeight - mask.offsetHeight){

// y = small.offsetHeight-mask.offsetHeight;

}

mask.style.left = x+ "px";

mask.style.top = y + "px";

console.log("mask.style.left = ",mask.style.left);

console.log("mask.style.top = ",mask.style.top);

console.log(document.getElementsByClassName("mask")[0]);

// 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位，后来想想只有定位的盒子才有top/left值

var mask_height=window.getComputedStyle(mask).getPropertyValue('height');

var mask_width=window.getComputedStyle(mask).getPropertyValue('width');

var big_height=window.getComputedStyle(big).getPropertyValue('height');

var big_width=window.getComputedStyle(big).getPropertyValue('width');

bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px";

bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px";

}

// console.log("x=",x);

// console.log("y=",y);

这是一个自己的小练习，目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。

出现的问题是：点击左下角【创建连线】按钮并点击图中某位置，选中第一个标记点后，通过354-355行(倒数10行左右

console.log("mask.style.left = ",mask.style.left);

console.log("mask.style.top = ",mask.style.top);

)中代码设置，在控制台明明看到x和y都在随着鼠标移动不断更新，但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼，希望指教下 element.style.top和element.style.left控制css属性失效的原因

4a4dc774dc66e250a3d565fd7a0e3476.png

张忆樵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值