创建一个HTML页面,使用<script>标记直接引入jQuery文件;定义一个div,并嵌套七个子div;设置应用于外层div的样式类(宽600px、高85px、边框1px灰色实线 等),设置嵌套的内层div样式(宽80px、高80px、float: left 等),设置应用于嵌套的七个div的七个样式类(背景色分别为七种颜色);使用jQuery获取内层div元素,应用fadeTo()方法淡入显示内层div并调整到指定的透明度;使用jQuery获取内层div元素,并通过事件方法绑定hover()事件,获取当前元素,实现鼠标移到该元素上应用fadeTo()方法淡入显示内层div至透明度1,鼠标从该元素移出时应用fadeTo()方法淡入显示内层div并调整到指定的透明度。
时间: 2024-03-05 19:47:58 浏览: 31
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery练习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
.outer {
width: 600px;
height: 85px;
border: 1px solid gray;
}
.inner {
width: 80px;
height: 80px;
float: left;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.indigo {
background-color: indigo;
}
.violet {
background-color: violet;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".inner").hide().fadeTo(1000, 1); // 初始隐藏并淡入显示内层div
$(".inner").hover(function() {
$(this).fadeTo(500, 1); // 鼠标移入时淡入显示内层div至透明度1
}, function() {
$(this).fadeTo(500, 0.5); // 鼠标移出时淡入显示内层div并调整到指定的透明度
});
});
</script>
</head>
<body>
<div class="outer">
<div class="inner red"></div>
<div class="inner orange"></div>
<div class="inner yellow"></div>
<div class="inner green"></div>
<div class="inner blue"></div>
<div class="inner indigo"></div>
<div class="inner violet"></div>
</div>
</body>
</html>
```
在这个页面中,我们使用了jQuery的fadeTo()方法实现了淡入淡出的效果,并使用了hover()方法实现了鼠标移入移出的效果。同时,我们还使用了CSS样式设置了外层div和内层div的大小和样式类。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)