jquery实现灯泡效果
时间: 2023-11-18 14:58:15 浏览: 45
以下是一个简单的jQuery实现灯泡效果的示例代码:
HTML代码:
```
<div id="lamp"></div>
```
CSS代码:
```
#lamp {
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
position: relative;
}
#lamp:before {
content: "";
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
}
#lamp:after {
content: "";
width: 10px;
height: 10px;
background-color: #f00;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
opacity: 0;
transition: opacity 0.5s ease;
}
```
jQuery代码:
```
$(document).ready(function() {
$('#lamp').click(function() {
$(this).toggleClass('on');
});
});
```
当单击灯泡时,它将切换到“on”类,该类将使灯泡的后代元素(即灯泡上的红色圆圈)的不透明度从0到1进行过渡,从而创建出灯泡亮起的效果。切换回“off”类时,不透明度将再次从1到0进行过渡,使灯泡熄灭。
相关推荐
![](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)