标签：ABOUT 鼠标 photo px US rotationAngle currentY currentX

ABOUT US页面：

前端框架：

</div>

<li><a href="#">爆爆珠系列</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</header>

<h2>真至味食品</h2>

<p>

真至味食品有限公司是专业生产奶茶原料、各种果汁果酱、果粉等产品的企业。我们以生产健康美味食品为使命，始终严格遵守国家食品安全标准，始终把食品安全和健康放在首位。

公司成立于2016年，经过各经销商多年的努力，产品行销覆盖全国各地，是国内果汁、果酱、果粉、奶茶原料行业规模比较大、比较有竞争力的企业。公司通过饮料类（果蔬汁、蛋白饮料饮料、爆爆珠果味酱）、果酱类、果粉类SC生产许可；每款产品均采用先进的全自动封闭式全套生产线生产，避免食品生产过程中被污染等，影响食品质量。公司有专业的食品研发部和食品检验部，具有先进的设备检验食品是否符合国家标准。我们以生产安全为保障，以食品安全为根本，以产品研发为动力，以客户至上为核心。欢迎各界朋友莅临参观、指导和业务洽谈。</p>

</div>

<button>浙ICP备16040770号-3</button>

</div>

Css样式：

.img1{

width: 100%;

height: 90%;

}

h1,h2,p{

margin: 0;

padding: 0;

text-align: center;

}

h1{

font-size:16px;

}

h2{

color: #4caf50;

font-size:25px;

}

#photo-container {

width: 1390px;

height: 400px;

overflow: hidden;

position: relative;

}

#photo {

width: 100%;

height: 100%;

position: absolute;

}

@keyframes rotate {

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateY(360deg);

}

#footer {

padding: 20px;

text-align: center;

}

js：

// 获取图片元素和容器元素

const photo = document.getElementById('photo');

const photoContainer = document.getElementById('photo-container');

// 初始角度和位置

let rotationAngle = 0;

let initialX = 0;

let initialY = 0;

let currentX = 0;

let currentY = 0;

// 监听鼠标按下事件

photo.addEventListener('mousedown', (e) => {

e.preventDefault();

initialX = e.clientX - currentX;

initialY = e.clientY - currentY;

document.addEventListener('mousemove', movePhoto);

document.addEventListener('mouseup', stopMovingPhoto);

});

// 图片移动函数

function movePhoto(e) {

currentX = e.clientX - initialX;

currentY = e.clientY - initialY;

photo.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotationAngle}deg)`;

}

// 停止移动函数

function stopMovingPhoto() {

document.removeEventListener('mousemove', movePhoto);

document.removeEventListener('mouseup', stopMovingPhoto);

}

// 图片自动旋转函数（每隔一段时间调用）

function rotatePhoto() {

rotationAngle += 1; // 调整旋转速度，适量调整此值

photo.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotationAngle}deg)`;

requestAnimationFrame(rotatePhoto);

}

// 启动自动旋转

rotatePhoto();

此页面最为难弄的就是那个图片的全景式旋转，且可以使用鼠标上下拖动，而我仅实现了可以鼠标拖动图片的效果。

部分代码解析：

photo.addEventListener('mousedown', (e) => { e.preventDefault(); initialX = e.clientX - currentX; initialY = e.clientY - currentY; document.addEventListener('mousemove', movePhoto); document.addEventListener('mouseup', stopMovingPhoto); });

这段代码是使用JavaScript添加了一个鼠标按下事件的监听器，具体操作如下：

photo.addEventListener('mousedown', (e) => { ... }); 表示为名为 "photo" 的元素添加了一个鼠标按下事件的监听器。

e.preventDefault(); 是用来阻止事件的默认行为，这里的目的是防止鼠标按下时发生的默认拖拽行为。

initialX = e.clientX - currentX; 将 initialX 的值设置为鼠标按下时的横坐标 e.clientX 减去 currentX 的值。这里的 currentX 可能是一个变量，表示当前元素的横坐标位置。

initialY = e.clientY - currentY; 将 initialY 的值设置为鼠标按下时的纵坐标 e.clientY 减去 currentY 的值。这里的 currentY 可能是一个变量，表示当前元素的纵坐标位置。

document.addEventListener('mousemove', movePhoto); 表示为整个文档添加了一个鼠标移动事件的监听器，并调用了名为 movePhoto 的函数。这意味着当鼠标在文档上移动时，会触发 movePhoto 函数。

document.addEventListener('mouseup', stopMovingPhoto); 表示为整个文档添加了一个鼠标松开事件的监听器，并调用了名为 stopMovingPhoto 的函数。这意味着当鼠标在文档上松开时，会触发 stopMovingPhoto 函数。

这段代码的目的是实现鼠标按下时拖动元素的功能。通过计算鼠标按下时的初始坐标与当前元素的坐标之差，可以确定鼠标在移动过程中相对于元素的偏移量。然后通过鼠标移动事件和鼠标松开事件的监听器来更新元素的位置或停止移动。

function movePhoto(e) { currentX = e.clientX - initialX; currentY = e.clientY - initialY; photo.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotationAngle}deg)`; }

这段代码定义了一个名为 movePhoto 的函数，用于处理鼠标移动事件。以下是代码的具体功能解释：

currentX 和 currentY 变量表示元素当前的横坐标和纵坐标位置。

e.clientX - initialX 表示当前鼠标位置的横坐标减去初始鼠标按下时的横坐标 initialX，得到鼠标在横向上的移动距离。

e.clientY - initialY 表示当前鼠标位置的纵坐标减去初始鼠标按下时的纵坐标 initialY，得到鼠标在纵向上的移动距离。

photo.style.transform 表示通过修改元素的 transform 样式来实现对元素位置和旋转的控制。

translate(${currentX}px, ${currentY}px) 表示使用 translate 函数来进行元素的平移，${currentX}px 和 ${currentY}px 分别表示元素在横向和纵向上的平移距离。

rotate(${rotationAngle}deg) 表示使用 rotate 函数来对元素进行旋转，${rotationAngle}deg 表示旋转角度，这里可能是一个变量。

通过将以上样式属性设置给 photo 元素的 transform 样式，可以实现在鼠标移动过程中，元素跟随鼠标的位置变化和旋转效果。

这段代码定义了一个名为 rotatePhoto 的函数，用于实现图片旋转效果。以下是代码的功能解释：

rotationAngle 变量用于保存图片的旋转角度。每次调用 rotatePhoto 函数时，rotationAngle 的值都会增加1，这样可以实现图片的持续旋转效果。您可以调整增加的值来改变旋转速度。

photo.style.transform 通过修改元素的 transform 样式来实现对元素位置和旋转的控制，与之前的代码类似。

translate(${currentX}px, ${currentY}px) 表示使用 translate 函数来进行元素的平移，${currentX}px 和 ${currentY}px 分别表示元素在横向和纵向上的平移距离。这部分代码与之前的 movePhoto 函数相同。

rotate(${rotationAngle}deg) 表示使用 rotate 函数来对元素进行旋转，${rotationAngle}deg 表示旋转角度，这里使用 rotationAngle 变量保存的值来实现不断旋转的效果。

最后，requestAnimationFrame(rotatePhoto); 通过递归调用 rotatePhoto 函数，实现不断更新旋转角度和样式，从而达到持续旋转的效果。使用 requestAnimationFrame 方法可以让动画在浏览器的合理刷新频率下运行，避免性能问题。

需要注意的是，要在适当的时候停止调用 rotatePhoto 函数，否则旋转会一直持续下去。通常，可以在某个条件下，比如用户的操作或者到达某个预设的旋转次数后，停止调用此函数，以停止旋转效果。

标签：ABOUT,鼠标,photo,px,US,rotationAngle,currentY,currentX
From： https://www.cnblogs.com/959886jjc/p/17531260.html

ABOUT US

ABOUT US页面：

前端框架：

Css样式：

js：

相关文章

赞助商

阅读排行