index
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<script src="../jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
// let lis = document.querySelectorAll(".tab .tab-item")
// let divs = document.querySelectorAll(".products .main")
// for (let i = 0; i < lis.length; i++) {
// lis[i].addEventListener("click", function () {
// document.querySelector(".tab .active").classList.remove("active")
// this.classList.add("active")
// //
// document.querySelector(".products .active").classList.remove("active")
// divs[i].classList.add("active")
// })
// }
$(function () {
$(".tab .tab-item").click(function () {
$(this).addClass("active").siblings().removeClass("active")
let index = $(this).index()
$(".products .main").eq(index).addClass("active").siblings().removeClass("active")
})
})
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/9f9ce67b6ba6b5d21cc7a4acf43197ce.png)
发布微博
<!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>
<link rel="stylesheet" href="../代码/weibo.css">
<script src="./jquery.min.js">
</script>
</head>
<body>
<div class="w">
<div class="controls">
<img src="../tu/tip.png" alt=""><br>
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
</ul>
</div>
</div>
<script>
$("#area").on({
"input": function () {
$(".useCount").html($(this).val().length)
},
"keydown": function (e) {
if (e.key == "Enter") {
$("#send").click()
$(".useCount").html("0")
}
}
})
$("#send").click(function () {
let li = $("<li></li>")
li.html($("#area").val() + "<a href='#'>删除</a>")
$("ul").prepend(li)
$("li").slideDown()
$("#area").val("")
$(".useCount").html("0")
});
$("ul").on("click", "a", function () {
$(this).parent().slideUp(function () {
$(this).remove()
})
$(this).parent().remove()
console.log($(this).parent())
})
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.w {
width: 900px;
margin: 0 auto;
}
.controls textarea {
width: 878px;
height: 100px;
resize: none;
border-radius: 10px;
outline: none;
padding-left: 20px;
padding-top: 10px;
font-size: 18px;
}
.controls {
overflow: hidden;
}
.controls div {
float: right;
}
.controls div span {
color: #666;
}
.controls div .useCount {
color: red;
}
.controls div button {
width: 100px;
outline: none;
border: none;
background: rgb(0, 132, 255);
height: 30px;
cursor: pointer;
color: #fff;
font: bold 14px '宋体';
transition: all 0.5s;
}
.controls div button:hover {
background: rgb(0, 225, 255);
}
.controls div button:disabled {
background: rgba(0, 225, 255, 0.5);
}
.contentList {
margin-top: 50px;
}
.contentList ul {
height: 800px;
}
.contentList li {
/* display: none; */
padding: 20px 0;
border-bottom: 1px dashed #ccc;
height: 60px;
}
.contentList li a {
margin-left: 800px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/2a3bd0d8ac5fe6f109dd0402d6a4cd3e.png)
jQuery手风琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画-案例《手风琴》</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 2400px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
overflow: hidden;
}
#box li {
width: 240px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><lmg src="./images/collapse/1.jpg" alt=""></li>
<li><lmg src="./images/collapse/2.jpg" alt=""></li>
<li><lmg src="./images/collapse/3.jpg" alt=""></li>
<li><lmg src="./images/collapse/4.jpg" alt=""></li>
<li><lmg src="./images/collapse/5.jpg" alt=""></li>
</ul>
</div>
<script src="./jquery/jquery-1.12.4.js"></script>
<script>
$(function () {
/*1.渲染图片*/
var $lis = $('#box li');
for (var i = 0; i < $lis.length; i++) {
var obj = $lis[i];
/*图片*/
obj.innerHTML = '<img src="images/collapse/' + (i + 1) + '.jpg" />';
}
$lis.mouseenter(function () {
$(this).stop().animate({ 'width': '800px' });
$(this).siblings().stop().animate({ 'width': '100px' })
});
$('#box').mouseleave(function () {
$lis.stop().animate({ 'width': '240px' });
});
})
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/e9664e9604092b6780bbe59916126f43.png)