style.cursor 的可选值(鼠标的各种样式)

crosshair;

 

十字准心

The cursor render as a crosshair
游标表现为十字准线

cursor: pointer;
cursor: hand;
写两个是为了照顾IE5,它只认hand。

 

The cursor render as a pointer (a hand) that indicates a link
游标以暗示(手指)的形式来表明有一个连接

cursor: wait;

 

等待/沙漏

The cursor indicates that the program is busy (often a watch or an hourglass)
游标暗示当前程序正忙(一般为一块表或是一个沙漏)

cursor: help;

 

帮助

The cursor indicates that help is available (often a question mark or a balloon)
游标暗示当前位置可得到帮助(一般为问号或是气球)

cursor: no-drop;

 

无法释放

cursor: no-drop;

cursor: text;

 

文字/编辑

The cursor indicates text
游标暗示当前所处位置为文字内容

cursor: move;

 

可移动对象

The cursor indicates something that should be moved
游标暗示一些东西应该被移动

cursor: n-resize;

 

向上改变大小(North)

The cursor indicates that an edge of a box is to be moved up (north)
边缘可向上移动(北)

cursor: s-resize;

 

向下改变大小(South)

The cursor indicates that an edge of a box is to be moved down (south)
边缘可向下方移动(南)

cursor: e-resize;

 

向右改变大小(East)

The cursor indicates that an edge of a box is to be moved right (east)
box边缘可向右(东)边移动

cursor: w-resize;

向左改变大小(West)

The cursor indicates that an edge of a box is to be moved left (west)
边缘可向左移动(西)

cursor: ne-resize;

 

向上右改变大小(North East)

The cursor indicates that an edge of a box is to be moved up and right (north/east)
游标暗示box的边缘可向右上方移动(东北方向)

cursor: nw-resize;

 

向上左改变大小(North West)

The cursor indicates that an edge of a box is to be moved up and left (north/west)
边缘可向左上方移动(西北)

cursor: se-resize;

 

向下右改变大小(South East)

The cursor indicates that an edge of a box is to be moved down and right (south/east)
边缘可向右下方移动(东南)

cursor: sw-resize;

 

向下左改变大小(South West)

The cursor indicates that an edge of a box is to be moved down and left (south/west)
边缘可向左下方移动(西南)

cursor: auto;

 

自动

The browser sets a cursor
浏览器设置一个游标

cursor:not-allowed;

 

禁止

cursor:not-allowed;

cursor: progress;

 

处理中

cursor: progress;

cursor: default;

 

系统默认

The default cursor (often an arrow)
默认的游标状态(通常为一个箭头)

cursor: url(' # ');
# = 光标文件地址      (注意文件格式必须为:.cur 或 .ani)。

 

用户自定义(可用动画)

The url of a custom cursor to be used.
自定义游标的url位置

Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
注意:在定义完自定义的游标之后在末尾加上一般性的游标,以防那些url所定义的游标不能使用

//绘制路线周边设备上图 showDevicesOnMap(devices) { this.clearDeviceMarkers(); console.log("位置--===", devices); // devices.forEach((device, index) => { // const { longitude, latitude } = device; // const markerElement = document.createElement("div"); // markerElement.style.position = "relative"; // markerElement.style.width = "34px"; // markerElement.style.height = "50px"; // // 设备图标 // const icon = document.createElement("div"); // icon.style.width = "30px"; // icon.style.height = "20px"; // icon.style.backgroundImage = device.online // ? 'url("/images/jk_online.png")' // : 'url("/images/jk_unline.png")'; // icon.style.backgroundSize = "100% 100%"; // icon.style.backgroundRepeat = "no-repeat"; // icon.style.position = "absolute"; // 改为绝对定位 // icon.style.top = "10px"; // 调整顶部位置以适应容器 // icon.style.left = "50%"; // markerElement.appendChild(icon); // // 序号标签 // const label = document.createElement("div"); // label.textContent = index + 1; // label.style.position = "absolute"; // label.style.top = "0px"; // label.style.left = "50%"; // label.style.transform = "translateX(-50%)"; // label.style.backgroundColor = // this.selectedDeviceId === device.id ? "#FF6666" : "#45CCDA"; // label.style.color = "white"; // label.style.borderRadius = "50%"; // label.style.width = "20px"; // label.style.height = "20px"; // label.style.textAlign = "center"; // label.style.lineHeight = "20px"; // label.style.fontSize = "12px"; // label.style.zIndex = "10"; // 确保标签在最上层 // markerElement.appendChild(label); // // 计算图标实际尺寸 // const iconHeight = 50; // 图标高度(包含标签) // // 直接使用原始坐标,不进行任何偏移计算 // const marker = new minemap.Marker(markerElement, { // offset: [0, -iconHeight / 2], // 垂直偏移补偿 // anchor: "center", // 使用中心定位 // }) // .setLngLat([longitude, latitude]) // 直接使用原始坐标 // .addTo(this.mapObj); // // 点击事件 // markerElement.addEventListener("click", (e) => { // e.stopPropagation(); // this.toggleDeviceSelection(device.id, label); // }); // this.deviceMarkers.push({ marker, device, label }); // }); // 创建新的数据源 // 创建GeoJSON数据源 } toggleDeviceSelection(deviceId, labelElement) { // 更新选中状态 const isSelected = this.selectedDeviceId === deviceId; this.selectedDeviceId = isSelected ? null : deviceId; // 更新标签颜色 labelElement.style.backgroundColor = isSelected ? "#45CCDA" : "#FF6666"; // 通知父组件 this.$emit("device-selected", this.selectedDeviceId, deviceId); },把这些替换为图层标记的方法类似于 // const dataSource = { // type: "FeatureCollection", // features: devices.map((device) => ({ // id: device.id, // type: "Feature", // geometry: { // type: "Point", // coordinates: [device.longitude, device.latitude], // }, // properties: { // ...device, // title: device.name, // "custom-image": device.online ? "jk_online" : "jk_unline", // index: device.index || 1, // 添加序号属性 // }, // })), // }; // // 设置数据源 // const mapSource = this.mapObj.getSource("data-point"); // mapSource.setData(dataSource);
最新发布
07-24
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; overflow: hidden; font-family: sans-serif; cursor: ew-resize; /* 添加左右箭头光标 */ } header { position: fixed; width: 100%; background: rgba(0,0,0,0.3); z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; } .logo { color: white; font-size: 1.8rem; font-weight: bold; text-decoration: none; } nav { display: flex; gap: 30px; background: transparent; } nav a { color: white; font-size: 1.1rem; text-decoration: none; padding: 8px 12px; transition: all 0.3s ease; } nav a:hover { background: rgba(255,255,255,0.1); border-radius: 4px; cursor: pointer; } .image-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; /* 添加拖动提示效果 */ background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%); background-size: 200% 100%; animation: dragHint 3s infinite; } .image-container img { position: absolute; width: 100%; height: 100%; object-fit: cover; /* 延长动画时间至3秒 */ transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transform: translateX(0); z-index: 1; } .image-container img.active { z-index: 3; /* 当前图片在顶层 */ } .image-container img.prev { z-index: 2; /* 前一张在中间层 */ transform: translateX(-100%); } .image-container img.next { z-index: 2; /* 后一张在中间层 */ transform: translateX(100%); } .title-container { position: absolute; top: 140px; left: 40px; z-index: 4; /* 标题在最顶层 */ max-width: 60%; } .main-title { font-size: 2.4rem; color: white; font-weight: bold; margin-bottom: 10px; text-shadow: 1px 1px 4px rgba(0,0,0,0.5); /* 延长标题动画时间 */ transition: transform 0.8s ease, opacity 0.8s ease; } .sub-title { font-size: 1.2rem; color: rgba(255,255,255,0.9); font-style: italic; /* 延长副标题动画时间 */ transition: transform 0.8s ease, opacity 0.8s ease; } /* 拖动提示动画 */ @keyframes dragHint { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* 光标提示区域 */ .drag-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(0,0,0,0.6); padding: 10px 20px; border-radius: 30px; color: white; font-size: 1rem; display: flex; align-items: center; gap: 10px; } .drag-indicator::after { content: "← 拖动鼠标切换 →"; } @media (max-width: 768px) { .main-title { font-size: 1.8rem; } .sub-title { font-size: 1rem; } .title-container { top: 140px; } header { padding: 15px 20px; } .drag-indicator { font-size: 0.8rem; } } </style> </head> <body> <header> <a href="#" class="logo">我的网站</a> <nav> <a href="#">首页</a> <a href="#">关于</a> <a href="#">联系</a> </nav> </header> <div class="image-container"> <div class="title-container"> <div class="main-title" id="mainTitle">标题1</div> <div class="sub-title" id="subTitle">副标题1</div> </div> <div class="drag-indicator"></div> </div> <script> // 10张图片数据 const images = [ { src: 'img/1.jpg', title: '标题1', subtitle: '副标题1' }, { src: 'img/2.jpg', title: '标题2', subtitle: '副标题2' }, { src: 'img/3.jpg', title: '标题3', subtitle: '副标题3' }, { src: 'img/4.jpg', title: '标题4', subtitle: '副标题4' }, { src: 'img/5.jpg', title: '标题5', subtitle: '副标题5' }, { src: 'img/6.jpg', title: '标题6', subtitle: '副标题6' }, { src: 'img/7.jpg', title: '标题7', subtitle: '副标题7' }, { src: 'img/8.jpg', title: '标题8', subtitle: '副标题8' } ]; let currentIndex = 0; let isAnimating = false; let dragStartX = 0; const container = document.querySelector('.image-container'); const mainTitle = document.getElementById('mainTitle'); const subTitle = document.getElementById('subTitle'); // 动态生成图片元素 images.forEach((img, index) => { const imgElement = document.createElement('img'); imgElement.src = img.src; imgElement.dataset.index = index; container.appendChild(imgElement); }); const imgElements = document.querySelectorAll('.image-container img'); // 初始化层级状态 function initSlider() { imgElements.forEach((img, i) => { img.classList.remove('active', 'prev', 'next'); if (i === currentIndex) { img.classList.add('active'); } else if (i === (currentIndex - 1 + images.length) % images.length) { img.classList.add('prev'); } else if (i === (currentIndex + 1) % images.length) { img.classList.add('next'); } }); updateTitles(); } function updateTitles() { mainTitle.textContent = images[currentIndex].title; subTitle.textContent = images[currentIndex].subtitle; } function changeSlide(direction) { if (isAnimating) return; isAnimating = true; // 添加标题动画效果 mainTitle.style.transform = 'translateY(-20px)'; mainTitle.style.opacity = '0'; subTitle.style.transform = 'translateY(20px)'; subTitle.style.opacity = '0'; // 计算新索引 const prevIndex = currentIndex; if (direction === 'right') { currentIndex = (currentIndex - 1 + images.length) % images.length; } else { currentIndex = (currentIndex + 1) % images.length; } // 获取新旧图片元素 const currentImg = imgElements[prevIndex]; const nextImg = imgElements[currentIndex]; // 设置层级关系 currentImg.style.zIndex = '2'; nextImg.style.zIndex = '3'; // 设置动画方向 if (direction === 'right') { currentImg.style.transform = 'translateX(100%)'; nextImg.style.transform = 'translateX(0)'; } else { currentImg.style.transform = 'translateX(-100%)'; nextImg.style.transform = 'translateX(0)'; } // 动画结束后重置状态 setTimeout(() => { // 重置所有图片状态 imgElements.forEach(img => { img.classList.remove('active', 'prev', 'next'); img.style.transform = ''; img.style.zIndex = ''; }); // 设置新层级状态 currentImg.classList.add(direction === 'right' ? 'next' : 'prev'); nextImg.classList.add('active'); // 设置相邻图片 const prevIndex = (currentIndex - 1 + images.length) % images.length; const nextIndex = (currentIndex + 1) % images.length; imgElements[prevIndex].classList.add('prev'); imgElements[nextIndex].classList.add('next'); // 重置标题状态 mainTitle.style.transform = ''; mainTitle.style.opacity = ''; subTitle.style.transform = ''; subTitle.style.opacity = ''; updateTitles(); isAnimating = false; }, 0.8); // 动画时间改为3秒 } // 鼠标事件处理函数 function handleMouseDown(e) { dragStartX = e.clientX; container.addEventListener('mousemove', handleMouseMove); container.addEventListener('mouseup', handleMouseUp); } function handleMouseMove(e) { const dragDistance = e.clientX - dragStartX; // 拖动超过100px时切换图片 if (Math.abs(dragDistance) > 50) { const direction = dragDistance > 0 ? 'right' : 'left'; changeSlide(direction); dragStartX = e.clientX; // 重置起点 } } function handleMouseUp() { container.removeEventListener('mousemove', handleMouseMove); container.removeEventListener('mouseup', handleMouseUp); } // 添加鼠标事件监听 container.addEventListener('mousedown', handleMouseDown); // 初始化轮播 initSlider(); </script> </body> </html> 现在是需要拖拽一下,才能根据鼠标的左右移动进行切换图片,我希望不用拖拽,直接根据鼠标移动的左右方向大于50px的时候切换图片,其它代码内容不要改,html js css 保持写到一起
06-24
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值