在网页DIV中设置一首诗词要求有诗的标题和作者,在标题上绑定双击事件,每一次双击标题时标题放大4px,在双击3次后解除绑定;在诗词第一行上使用one()函数绑定单击事件,单击时设置整个诗词正文字号设为24PX;在诗词最一后行上设置hover()函数,鼠标进入时页面背景设为浅蓝色(颜色自定义),鼠标离开时设置背景为浅绿色(颜色自定义);在页面空白处使用toggle()函数,单击时诗词正文在三种颜色之间切换。
时间: 2023-12-03 10:45:54 浏览: 19
以下是一个实现以上要求的示例代码:
HTML:
```
<div id="poem">
<h2 id="title">《静夜思》 - 李白</h2>
<p id="content">
床前明月光,疑是地上霜。<br>
举头望明月,低头思故乡。
</p>
<p id="author">—— 李白</p>
</div>
```
CSS:
```
#poem {
margin: 50px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
font-size: 16px;
}
#title {
cursor: pointer;
}
#author {
text-align: right;
}
#poem:hover {
background-color: #eef;
}
```
JavaScript:
```
$(document).ready(function() {
var clicks = 0;
// 双击标题放大
$("#title").dblclick(function() {
clicks++;
if (clicks % 3 != 0) {
$(this).css("font-size", "+=4");
} else {
$(this).unbind("dblclick");
}
});
// 点击第一行设置字号
$("#content").one("click", function() {
$(this).css("font-size", "24px");
});
// 鼠标悬停/离开改变背景色
$("#poem").hover(
function() {
$(this).css("background-color", "#ccf");
},
function() {
$(this).css("background-color", "#cfc");
}
);
// 点击空白处切换颜色
$("html").click(function() {
var colors = ["#f00", "#0f0", "#00f"];
var currentColor = $("#content").css("color");
var index = colors.indexOf(currentColor);
if (index < 0 || index >= colors.length - 1) {
index = 0;
} else {
index++;
}
$("#content").css("color", colors[index]);
});
});
```