驭鑫网站重写 new yxsilicon
This commit is contained in:
parent
503b5f14b1
commit
b4428e08df
|
|
@ -230,7 +230,7 @@ body{
|
|||
box-shadow: 0 4px 24px rgba(54,198,240,0.10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
|
|
@ -246,9 +246,11 @@ body{
|
|||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
padding: 1vw 3vw; /* 左右各加3vw，保证两侧有足够空间 */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
/* 稍微增加边距，确保不被按钮遮挡 */
|
||||
padding-left: 2vw;
|
||||
padding-right: 2vw;
|
||||
}
|
||||
.brand-carousel-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
@ -291,8 +293,9 @@ body{
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
z-index: 5;
|
||||
width: 2vw;
|
||||
min-width: 32px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: #fff;
|
||||
|
|
@ -307,6 +310,7 @@ body{
|
|||
margin-left: 0;
|
||||
color: #00A0D2;
|
||||
text-align: center;
|
||||
background: rgba(255,255,255,0.9); /* 半透明背景 */
|
||||
}
|
||||
.brand-btn.left { left: 0px; }
|
||||
.brand-btn.right { right: 0px; }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -41,18 +41,18 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
const clone = list.cloneNode(true);
|
||||
clone.classList.add('brand-carousel-list-clone');
|
||||
list.parentNode.appendChild(clone);
|
||||
|
||||
|
||||
list.style.display = 'inline-flex';
|
||||
clone.style.display = 'inline-flex';
|
||||
container.style.whiteSpace = 'nowrap';
|
||||
|
||||
|
||||
let scrollSpeed = 1;
|
||||
let isHovering = false;
|
||||
let pauseTimer = null;
|
||||
|
||||
|
||||
container.addEventListener('mouseenter', () => { isHovering = true; });
|
||||
container.addEventListener('mouseleave', () => { isHovering = false; });
|
||||
|
||||
|
||||
function loopScroll() {
|
||||
if (!isHovering) {
|
||||
if (container.scrollLeft >= list.scrollWidth) {
|
||||
|
|
@ -64,47 +64,66 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
requestAnimationFrame(loopScroll);
|
||||
}
|
||||
loopScroll();
|
||||
|
||||
|
||||
// 动态获取单个brand-item的宽度（含margin）
|
||||
function getItemWidth() {
|
||||
const item = list.querySelector('.brand-item');
|
||||
if (!item) return 200;
|
||||
const style = getComputedStyle(item);
|
||||
// 只加margin-right，因为你只有右间隔
|
||||
// 只加margin-right，因为只有右间隔
|
||||
return item.offsetWidth + parseFloat(style.marginRight || 0);
|
||||
}
|
||||
|
||||
|
||||
// 修改后的滚动逻辑
|
||||
function scrollByStep(step) {
|
||||
isHovering = true;
|
||||
if (pauseTimer) clearTimeout(pauseTimer);
|
||||
pauseTimer = setTimeout(() => { isHovering = false; }, 1500);
|
||||
|
||||
const itemWidth = getItemWidth();
|
||||
const visibleItems = Math.floor(container.offsetWidth / itemWidth);
|
||||
const count = 3; // 每次滑动3个
|
||||
|
||||
// 计算新的滚动位置，确保完整项目显示
|
||||
let target = Math.round(container.scrollLeft / itemWidth) * itemWidth;
|
||||
target += step * count * itemWidth;
|
||||
|
||||
// 限制滚动范围
|
||||
if (target < 0) target = 0;
|
||||
const maxScrollPosition = list.scrollWidth - container.offsetWidth +
|
||||
(container.offsetWidth % itemWidth); // 调整
|
||||
if (target > maxScrollPosition) target = maxScrollPosition;
|
||||
|
||||
// 滚动到指定位置
|
||||
container.scrollTo({
|
||||
left: target,
|
||||
|
||||
const items = list.querySelectorAll('.brand-item');
|
||||
if (items.length === 0) return;
|
||||
|
||||
// 动态计算每个项目的宽度（包括margin）
|
||||
const itemWidths = Array.from(items).map(item => {
|
||||
const style = getComputedStyle(item);
|
||||
return item.offsetWidth + parseFloat(style.marginRight || 0);
|
||||
});
|
||||
|
||||
// 计算当前第一个完整显示的项目的索引
|
||||
let currentScroll = container.scrollLeft;
|
||||
let currentIndex = 0;
|
||||
let accumulatedWidth = 0;
|
||||
|
||||
for (let i = 0; i < itemWidths.length; i++) {
|
||||
accumulatedWidth += itemWidths[i];
|
||||
if (accumulatedWidth > currentScroll) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 计算目标索引，每次滑动3个项目
|
||||
let targetIndex = currentIndex + step * 3;
|
||||
targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
|
||||
|
||||
// 计算目标滚动位置
|
||||
let targetScroll = 0;
|
||||
for (let i = 0; i < targetIndex; i++) {
|
||||
targetScroll += itemWidths[i];
|
||||
}
|
||||
|
||||
// 限制最大滚动距离
|
||||
const maxScroll = list.scrollWidth - container.offsetWidth;
|
||||
targetScroll = Math.min(targetScroll, maxScroll);
|
||||
|
||||
// 应用滚动
|
||||
container.scrollTo({
|
||||
left: targetScroll,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 调试信息
|
||||
console.log('Item width:', itemWidth);
|
||||
console.log('Visible items:', visibleItems);
|
||||
console.log('Scrolling to position:', target);
|
||||
}
|
||||
|
||||
|
||||
// 绑定左右按钮事件
|
||||
if (btnLeft) {
|
||||
btnLeft.addEventListener('click', () => {
|
||||
scrollByStep(-1);
|
||||
|
|
@ -121,31 +140,31 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
// -----------------------------电子产品设计生产制造服务区卡片轮播--------------------------------
|
||||
const cardContainer = document.querySelector('.card-carousel-container');
|
||||
const cardList = document.querySelector('.card-carousel-list');
|
||||
|
||||
|
||||
if (cardContainer && cardList) {
|
||||
// 克隆列表实现无缝滚动
|
||||
const clone = cardList.cloneNode(true);
|
||||
clone.classList.add('card-carousel-list-clone');
|
||||
cardList.parentNode.appendChild(clone);
|
||||
|
||||
|
||||
// 设置样式
|
||||
cardList.style.display = 'inline-flex';
|
||||
clone.style.display = 'inline-flex';
|
||||
cardContainer.style.whiteSpace = 'nowrap';
|
||||
|
||||
|
||||
let scrollSpeed = 1; // 增加滚动速度
|
||||
let isHovering = false;
|
||||
|
||||
|
||||
// 鼠标悬停暂停
|
||||
cardContainer.addEventListener('mouseenter', () => {
|
||||
cardContainer.addEventListener('mouseenter', () => {
|
||||
console.log('Mouse enter - pausing scroll');
|
||||
isHovering = true;
|
||||
isHovering = true;
|
||||
});
|
||||
cardContainer.addEventListener('mouseleave', () => {
|
||||
cardContainer.addEventListener('mouseleave', () => {
|
||||
console.log('Mouse leave - resuming scroll');
|
||||
isHovering = false;
|
||||
isHovering = false;
|
||||
});
|
||||
|
||||
|
||||
function loopScroll() {
|
||||
if (!isHovering) {
|
||||
if (cardContainer.scrollLeft >= cardList.scrollWidth) {
|
||||
|
|
@ -157,11 +176,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
}
|
||||
requestAnimationFrame(loopScroll);
|
||||
}
|
||||
|
||||
|
||||
// 启动滚动
|
||||
console.log('Starting scroll animation');
|
||||
loopScroll();
|
||||
|
||||
|
||||
// 调试信息
|
||||
console.log('Container width:', cardContainer.offsetWidth);
|
||||
console.log('List width:', cardList.scrollWidth);
|
||||
|
|
@ -173,27 +192,27 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
|
||||
|
||||
// -----------------------点击跳转服务案例页面对应项目--------------------------------
|
||||
document.querySelectorAll('.service-case-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
// 传递 index 和 scroll 标记
|
||||
window.name = this.dataset.index + '|scroll';
|
||||
window.location.href = this.href;
|
||||
});
|
||||
});
|
||||
|
||||
// -------绑定banner箭头跳转--------------
|
||||
function handleCaseJump(selector) {
|
||||
document.querySelectorAll(selector).forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
// -----------------------点击跳转服务案例页面对应项目--------------------------------
|
||||
document.querySelectorAll('.service-case-link').forEach(link => {
|
||||
link.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
// 传递 index 和 scroll 标记
|
||||
window.name = this.dataset.index + '|scroll';
|
||||
window.location.href = this.href;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 绑定banner箭头跳转
|
||||
handleCaseJump('.arrowBox[data-index]');
|
||||
// -------绑定banner箭头跳转--------------
|
||||
function handleCaseJump(selector) {
|
||||
document.querySelectorAll(selector).forEach(link => {
|
||||
link.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
window.name = this.dataset.index + '|scroll';
|
||||
window.location.href = this.href;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定banner箭头跳转
|
||||
handleCaseJump('.arrowBox[data-index]');
|
||||
});
|
||||
Loading…
Reference in New Issue