在网页DIV中设置一首诗词(要求有诗的标题和作者),在标题上绑定双击事件,每一次双击标题时标题放大4px,在双击3次后解除绑定;在诗词第一行上使用one()函数绑定单击事件,单击时设置整个诗词正文字号设为24PX;在诗词最一后行上设置hover()函数,鼠标进入时页面背景设为浅蓝色(颜色自定义),鼠标离开时设置背景为浅绿色(颜色自定义);在页面空白处使用toggle()函数,单击时诗词正文在三种颜色之间切换。
时间: 2023-12-03 13:44:27 浏览: 15
以下是代码实现:
HTML代码:
```html
<div id="poem">
<h2 id="title">《静夜思》- 李白</h2>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡。</p>
</div>
```
CSS代码:
```css
body {
background-color: #fff;
}
#poem {
margin: 50px auto;
width: 80%;
padding: 20px;
font-size: 16px;
text-align: center;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#title {
cursor: pointer;
}
#poem:hover {
background-color: #e6f7ff;
}
#poem p {
margin: 10px 0;
}
.color1 {
color: #f00;
}
.color2 {
color: #00f;
}
.color3 {
color: #0f0;
}
```
JavaScript代码:
```javascript
$(function() {
var clickCount = 0; // 双击标题次数计数器
var colors = ['color1', 'color2', 'color3']; // 颜色数组
var colorIndex = 0; // 颜色索引
// 双击标题事件
$('#title').dblclick(function() {
$(this).css('font-size', '+=4px');
clickCount++;
if (clickCount >= 3) {
$(this).off('dblclick');
}
});
// 单击第一行事件
$('#poem p:first-child').one('click', function() {
$('#poem').css('font-size', '24px');
});
// 悬停最后一行事件
$('#poem p:last-child').hover(function() {
$('body').css('background-color', '#cfe2ff');
}, function() {
$('body').css('background-color', '#e3f2d9');
});
// 点击空白处事件
$('body').click(function() {
$('#poem').removeClass(colors[colorIndex]);
colorIndex++;
if (colorIndex >= colors.length) {
colorIndex = 0;
}
$('#poem').addClass(colors[colorIndex]);
});
});
```