<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#card{
display:none;
width: 200px;
height: 200px;
}
.active{
background-color: #555;
color:wheat;
}
</style>
<script src="C:\Users\PC\Desktop\jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var cardTrigger = $('#card-trigger');
var card = $('#card');
$(cardTrigger).click(function(){
if(card.is(':visible')){
card.slideUp();
}else{
card.slideDown();
}
});
card.mouseenter(function(){
card.addClass('active');
});
card.mouseleave(function(){
card.removeClass('active');
})
});
</script>
</head>
<body>
<button id="card-trigger">显示/隐藏公告</button>
<div id="card">
<h1>公告</h1>
我哦你的内存测试能接受你就手机号多少是的本身的不是不打架是哪边度假胜地
</div>
</body>
</html>
jquery--公告栏
最新推荐文章于 2022-12-03 17:34:17 发布
本文详细介绍了如何使用jQuery库创建动态公告栏效果,包括滚动、淡入淡出等动画技巧,适用于网站信息展示和更新。
摘要由CSDN通过智能技术生成