js实现对联
使用JavaScript实现对联效果
实现网页对联广告或装饰效果的核心思路是通过CSS定位和JavaScript动态调整元素位置。以下是具体实现方法：
基础HTML结构
<div class="couplet left">上联内容</div>
<div class="couplet right">下联内容</div>CSS样式设置
.couplet {
position: fixed;
top: 50%;
width: 100px;
padding: 10px;
background-color: #c00;
color: gold;
font-size: 20px;
text-align: center;
transform: translateY(-50%);
z-index: 9999;
}
.left {
left: 0;
}
.right {
right: 0;
}JavaScript动态调整
window.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const couplets = document.querySelectorAll('.couplet');
couplets.forEach(couplet => {
couplet.style.top = 50 + scrollTop * 0.1 + '%';
});
});高级实现方案
响应式处理
function initCouplet() {
const windowHeight = window.innerHeight;
const coupletHeight = 200; // 对联元素高度
document.querySelectorAll('.couplet').forEach(couplet => {
couplet.style.top = Math.max(0, (windowHeight - coupletHeight) / 2) + 'px';
});
}
window.addEventListener('resize', initCouplet);
initCouplet();动画效果增强
.couplet {
transition: top 0.3s ease-out;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-radius: 5px;
}关闭功能实现
document.querySelectorAll('.couplet').forEach(couplet => {
const closeBtn = document.createElement('span');
closeBtn.innerHTML = '×';
closeBtn.style.position = 'absolute';
closeBtn.style.right = '5px';
closeBtn.style.top = '5px';
closeBtn.style.cursor = 'pointer';
closeBtn.addEventListener('click', function() {
couplet.style.display = 'none';
});
couplet.appendChild(closeBtn);
});注意事项
- 对联元素应使用
position: fixed确保始终可见 - z-index值要设置足够高避免被其他元素覆盖
- 移动端需要考虑视口宽度，可能需要调整样式
- 内容更新可以通过JavaScript动态修改元素innerHTML
这种实现方式兼容主流浏览器，可以通过修改CSS自定义样式风格，JavaScript部分控制交互行为和位置调整。
