iPad 桌宠制作教程：简单易学，打造你的专属萌宠
以下是一个简单的 iPad 桌宠示例代码，使用 HTML、CSS 和 JavaScript 来创建一个可移动的桌面宠物：
<!DOCTYPE html>
<html>
<head>
<style>
#pet {
position: fixed;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
</style>
</head>
<body>
<div id='pet'></div>
<script>
// 获取宠物元素
var pet = document.getElementById('pet');
// 初始化宠物位置
var initialX = 0;
var initialY = 0;
// 监听宠物拖动事件
pet.addEventListener('mousedown', dragStart);
pet.addEventListener('touchstart', dragStart);
pet.addEventListener('mouseup', dragEnd);
pet.addEventListener('touchend', dragEnd);
pet.addEventListener('mousemove', drag);
pet.addEventListener('touchmove', drag);
// 宠物拖动开始
function dragStart(e) {
e.preventDefault();
if (e.type === 'touchstart') {
initialX = e.touches[0].clientX - pet.offsetLeft;
initialY = e.touches[0].clientY - pet.offsetTop;
} else {
initialX = e.clientX - pet.offsetLeft;
initialY = e.clientY - pet.offsetTop;
}
pet.style.cursor = 'grabbing';
}
// 宠物拖动中
function drag(e) {
e.preventDefault();
if (e.type === 'touchmove') {
pet.style.left = e.touches[0].clientX - initialX + 'px';
pet.style.top = e.touches[0].clientY - initialY + 'px';
} else {
pet.style.left = e.clientX - initialX + 'px';
pet.style.top = e.clientY - initialY + 'px';
}
}
// 宠物拖动结束
function dragEnd(e) {
pet.style.cursor = 'pointer';
}
</script>
</body>
</html>
你可以将上述代码保存为一个 HTML 文件，并在 iPad 上打开该文件。你将会看到一个黄色的圆形宠物，你可以使用手指点击并拖动它在屏幕上移动。这是一个简单的 iPad 桌宠示例，你可以根据自己的需求修改宠物的外观和行为。
原文地址: https://www.cveoy.top/t/topic/MnD 著作权归作者所有。请勿转载和采集!