网页之间移动图片效果(伪移动,只是效果,并非真移动到另一个网页)

一名路过的菜鸟

已于 2023-05-15 20:45:27 修改

阅读量144

点赞数

文章标签： javascript 前端 html

于 2023-05-15 20:22:03 首次发布

本文链接：https://blog.csdn.net/qq_36370910/article/details/130691624

版权

请添加图片描述

来源:
https://www.douyin.com/user/MS4wLjABAAAAi2oukRVcHpgD-HbVdzsxE7tYykr91YuIKukR_X_Yy08EFWRQhRrECDF6FvbvT8Xa?modal_id=7232937220259319095&vid=7232937220259319095

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img style="position: absolute; width: 150px;" src="https://img1.imgtp.com/2023/05/15/Sq9xkJyQ.png" class="card"/>
	</body>
	<script src="jscom.js"></script>
</html>

const card = document.querySelector('.card');

//浏览器工具栏的高度, 
//如果你是edge浏览器的话, 只要你屏幕缩放比例是100%(高分屏不清楚),应改不用改.
const BAR = 79

//获取坐标
function getClientPoint(screenX , screenY){
	//屏幕到浏览器横向坐标
	const clientX = screenX - window.screenX;
	//屏幕到浏览器竖向坐标, 但是因为安全问题, 浏览器的工具栏的大小js没办法知道
	const clientY = screenY - window.screenY - BAR;	
	return [clientX,clientY];
}

function getScreenPoint(clientX , clientY){
	const screenX = clientX + window.screenX;
	const screenY = clientY + window.screenY + BAR;
	return [screenX,screenY];
}


//图片拖动代码
card.onmousedown = (e) => {
	let x = e.pageX - card.offsetLeft;
	let y = e.pageY - card.offsetTop;
	window.onmousemove = (e) => {
		const cx = e.pageX -x;
		const cy = e.pageY -y;
		card.style.left = cx + 'px';
		card.style.top = cy + 'px';
		//向其他窗口发送坐标信息, 通知其他窗口, 
		channel.postMessage(getScreenPoint(cx,cy));
	};
	window.onmouseup = () => {
		window.onmousemove = null;
		window.onmouseup = null;
	};
};


//隐藏剩下的两个页面的图片, 地址后加 ?hidden
function init(){
	if(location.search.includes('hidden')){
		card.style.left = '-1000px';
	}
}

init();


//标签页通信,传递图片坐标
const channel = new BroadcastChannel('card');

//获取传过来的数据
channel.onmessage = (e) =>{
	//通过传过来的屏幕坐标, 算出相对于当前窗口的视口坐标
	const [cx,cy] = getClientPoint(...e.data)
	//然后更新当前窗口的图片坐标
	card.style.left = cx + 'px';
	card.style.top = cy + 'px';
}