测试页面:修订间差异
来自SOKA CAFE
小 |
小 |
||
| 第3行: | 第3行: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title> | <title>自适应轮播图</title> | ||
<style> | <style> | ||
* { | * { | ||
| 第10行: | 第10行: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.container { | .container { | ||
width: | width: 90vw; /* 使用视口宽度 */ | ||
height: | max-width: 800px; /* 电脑端最大宽度 */ | ||
margin: | min-width: 280px; /* 最小宽度 */ | ||
height: auto; | |||
min-height: 120px; /* 最小高度 */ | |||
aspect-ratio: 2.03; /* 保持原有270/133≈2.03的比例 */ | |||
margin: 20px auto; | |||
background: #fff; | background: #fff; | ||
border-radius: | border-radius: 12px; | ||
padding: | padding: 12px; | ||
box-shadow: 0 4px | box-shadow: 0 4px 20px rgba(0,0,0,0.15); | ||
} | } | ||
.carousel { | .carousel { | ||
position: relative; | position: relative; | ||
width: | width: 100%; | ||
height: | height: 100%; | ||
border-radius: | border-radius: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.carousel-wrapper { | .carousel-wrapper { | ||
display: flex; | display: flex; | ||
| 第32行: | 第39行: | ||
transition: transform 0.5s ease; | transition: transform 0.5s ease; | ||
} | } | ||
.carousel-item { | .carousel-item { | ||
flex: 0 0 100%; | flex: 0 0 100%; | ||
| 第37行: | 第45行: | ||
height: 100%; | height: 100%; | ||
} | } | ||
.carousel-link { | .carousel-link { | ||
display: block; | display: block; | ||
| 第42行: | 第51行: | ||
height: 100%; | height: 100%; | ||
} | } | ||
.carousel-item img { | .carousel-item img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
object-fit: cover; | object-fit: cover; /* 保持图片比例并填充容器 */ | ||
object-position: center; | |||
} | } | ||
.carousel-btn { | .carousel-btn { | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
width: | width: 36px; | ||
height: | height: 36px; | ||
background: rgba(0,0,0,0. | background: rgba(0,0,0,0.4); | ||
color: #fff; | color: #fff; | ||
border: none; | border: none; | ||
border-radius: 50%; | border-radius: 50%; | ||
font-size: | font-size: 18px; | ||
cursor: pointer; | cursor: pointer; | ||
z-index: 10; | z-index: 10; | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
transition: background 0.3s; | |||
} | } | ||
.carousel-btn:hover { | |||
background: rgba(0,0,0,0.6); | |||
} | |||
.prev-btn { | .prev-btn { | ||
left: | left: 12px; | ||
} | } | ||
.next-btn { | .next-btn { | ||
right: | right: 12px; | ||
} | } | ||
.carousel-indicators { | .carousel-indicators { | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: 15px; | ||
left: 50%; | left: 50%; | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
display: flex; | display: flex; | ||
gap: | gap: 8px; | ||
} | } | ||
.indicator { | .indicator { | ||
width: | width: 10px; | ||
height: | height: 10px; | ||
border-radius: 50%; | border-radius: 50%; | ||
background: rgba(255,255,255,0.5); | background: rgba(255,255,255,0.5); | ||
cursor: pointer; | cursor: pointer; | ||
transition: all 0.3s; | |||
} | } | ||
.indicator.active { | .indicator.active { | ||
background: #fff; | background: #fff; | ||
transform: scale(1.2); | |||
} | |||
/* 平板设备 */ | |||
@media (max-width: 1024px) { | |||
.container { | |||
width: 85vw; | |||
max-width: 600px; | |||
padding: 10px; | |||
} | |||
.carousel-btn { | |||
width: 32px; | |||
height: 32px; | |||
font-size: 16px; | |||
} | |||
} | |||
/* 手机设备 */ | |||
@media (max-width: 768px) { | |||
.container { | |||
width: 92vw; | |||
max-width: 500px; | |||
padding: 8px; | |||
border-radius: 10px; | |||
margin: 15px auto; | |||
} | |||
.carousel { | |||
border-radius: 6px; | |||
} | |||
.carousel-btn { | |||
width: 28px; | |||
height: 28px; | |||
font-size: 14px; | |||
opacity: 0.9; | |||
} | |||
.prev-btn { | |||
left: 8px; | |||
} | |||
.next-btn { | |||
right: 8px; | |||
} | |||
.carousel-indicators { | |||
bottom: 10px; | |||
} | |||
.indicator { | |||
width: 8px; | |||
height: 8px; | |||
} | |||
} | |||
/* 小手机设备 */ | |||
@media (max-width: 480px) { | |||
.container { | |||
width: 94vw; | |||
min-width: 260px; | |||
padding: 6px; | |||
margin: 10px auto; | |||
} | |||
.carousel-btn { | |||
width: 24px; | |||
height: 24px; | |||
font-size: 12px; | |||
} | |||
.prev-btn { | |||
left: 5px; | |||
} | |||
.next-btn { | |||
right: 5px; | |||
} | |||
.indicator { | |||
width: 6px; | |||
height: 6px; | |||
} | |||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<div style="font-size: min(4vw, 26px); margin-top: 20px; text-align: center; font-family: serif; padding: 0 10px;"> | |||
'''欢迎来到「SOKA CAFE——エア本中文维基」''' | |||
</div> | |||
<div style="font-size: min(3vw, 18px); margin-bottom: 15px; text-align: center; margin-top: 10px; padding: 0 10px;"> | |||
''頭がパーン@wiki:中華エア本支部'' | |||
</div> | |||
<div class="container"> | <div class="container"> | ||
<div class="carousel" id="carousel"> | <div class="carousel" id="carousel"> | ||
| 第97行: | 第214行: | ||
</div> | </div> | ||
<div class="carousel-item"> | <div class="carousel-item"> | ||
<a href="https://soka.cafe/index.php?title= | <a href="https://soka.cafe/index.php?title=维基观看与使用指南" class="carousel-link"> | ||
<img src="https://soka.cafe/Special:FilePath/导航1.1.jpg" alt="维基观看与使用指南"> | <img src="https://soka.cafe/Special:FilePath/导航1.1.jpg" alt="维基观看与使用指南"> | ||
</a> | </a> | ||
| 第112行: | 第229行: | ||
</div> | </div> | ||
</div> | </div> | ||
<script> | <script> | ||
const carouselWrapper = document.getElementById("carouselWrapper"); | const carouselWrapper = document.getElementById("carouselWrapper"); | ||
| 第149行: | 第267行: | ||
let autoPlay = setInterval(nextSlide, 5000); | let autoPlay = setInterval(nextSlide, 5000); | ||
const carousel = document.getElementById("carousel"); | const carousel = document.getElementById("carousel"); | ||
// 鼠标悬停时暂停自动播放 | |||
carousel.addEventListener("mouseenter", () => clearInterval(autoPlay)); | carousel.addEventListener("mouseenter", () => clearInterval(autoPlay)); | ||
carousel.addEventListener("mouseleave", () => autoPlay = setInterval(nextSlide, 5000)); | carousel.addEventListener("mouseleave", () => { | ||
clearInterval(autoPlay); | |||
autoPlay = setInterval(nextSlide, 5000); | |||
}); | |||
// 触摸设备支持 | |||
let startX = 0; | |||
let endX = 0; | |||
carousel.addEventListener("touchstart", (e) => { | |||
startX = e.touches[0].clientX; | |||
clearInterval(autoPlay); | |||
}); | |||
carousel.addEventListener("touchend", (e) => { | |||
endX = e.changedTouches[0].clientX; | |||
if (startX - endX > 50) { | |||
nextSlide(); // 向左滑动 | |||
} else if (endX - startX > 50) { | |||
prevSlide(); // 向右滑动 | |||
} | |||
autoPlay = setInterval(nextSlide, 5000); | |||
}); | |||
prevBtn.addEventListener("click", prevSlide); | prevBtn.addEventListener("click", prevSlide); | ||
nextBtn.addEventListener("click", nextSlide); | nextBtn.addEventListener("click", nextSlide); | ||
// 初始化 | |||
renderIndicators(); | renderIndicators(); | ||
// 窗口大小变化时重新计算 | |||
window.addEventListener("resize", () => { | |||
// 重新定位当前幻灯片 | |||
goToSlide(currentIndex); | |||
}); | |||
</script> | </script> | ||
</body> | </body> | ||
2026年1月27日 (二) 15:33的最新版本
'''欢迎来到「SOKA CAFE——エア本中文维基」'''
''頭がパーン@wiki:中華エア本支部''
第一页
第二页
</tabber> |-|历史上的星期=
|-|活动公告=
久本的虚拟化身“Paru”悬浮在宗教都市的圣殿中,脚下是由数以百万记的信徒们的祈祷所化作成的铁链。
在这片虚无的大地中,一道裂痕撕开了穹顶,《激突!美食赛跑!》的音乐,轰鸣而至……
</tabber>
字体测试
字体测试
字体测试
表格测试
| 申请号 | CN951080741 | 申请日期 | 1995-07-28 |
| 公告号 | CN1141833A | 公布/公告日期 | 1997-02-05 |
| 发明人 | 周寿坤、王志泽、孙正江 | 申请(专利权)人 | 北京汇佳物产技术公司 |
| 专利代理人 | 何润华 | 专利代理机构 | 北京申翔知识产权服务公司专利代理部 |
| 专利类型 | 发明专利 | 主分类号 | B23K3/047 |
| 住所 | 北京市8756信箱 | ||
| 法律状态 | - | ||
| 摘要 | 本发明是对另一在先专利(ZL 94 21966.X)的改进方案。在焊枪装置上的改进是取消了焊针尾丝,和用于连接尾丝的衔接器、退焊针尾丝的滑杆。导电通路的这一部分直接由焊针连接卡爪、大簧座、大簧、导电套与穿过壳体的外接电源线连接。大簧兼作导电线圈和复位弹簧使用,通电时使内套磁化,吸引大簧座位移并带动卡爪夹带焊针在瓷环卡爪中拉弧,断电后使焊针复位固结焊口。自动拉弧钎焊机包括焊枪、焊针和自控电路。自控电路至少设置定时电路,还可串联过流保护电路,低于规定电压自锁电路、闪光电路。 | ||




