1.例子：选项卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $btn = $(‘.btns input‘);
var $slide = $(‘.cons .slide‘);
/*alert($div.length),判断是否获取*/
$btn.click(function(){
/*移出除当前的类，siblings选择同辈元素*/
$(this).addClass(‘current‘).siblings().removeClass(‘current‘);
/*index（）显示索引*/
/*$div.eq($(this).index()).addClass(‘div1‘).siblings().removeClass(‘div1‘);*/
/*stop()防止重复点击，animate（）动画效果*/
$slide.stop().animate({‘left‘:-500*$(this).index()});
})
})
</script><style type="text/css">
.btns input{
width: 100px;
height: 40px;
background-color: antiquewhite;
border: 0;/*给宽高会有边框*/
}
.btns .current{
background-color: aqua;
}
.cons{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.slide{
width: 1500px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.cons .slide div{
width: 500px;
height: 200px;
background-color: aquamarine;
line-height: 200px;
text-align: center;
font-size: 30px;
float: left;
}
/*.cons .div1{
display: block;
}*/
</style></head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="slide">
<div>选项卡1</div>
<div>选项卡2</div>
<div>选项卡3</div>
</div>
</div></body>
</html>
2.animate动画
可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(‘#btn‘).click(function(){
/*分步执行，延时1000ms*/
$(‘.box‘).animate({‘width‘:100},1000,function(){
$(‘.box‘).animate({‘height‘:100},1000,function(){
$(‘.box‘).animate({‘opacity‘:0.4});
});
});
})
$(‘#btn01‘).click(function(){
/*每次点击加一百*/
$(‘.box01‘).stop().animate({‘width‘:‘+=100‘})
})
})
</script><style type="text/css">
.box,.box01{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style></head>
<body>
<input type="button" value="动画" id="btn">
<div class="box"></div>
<br>
<br>
<input type="button" value="动画" id="btn01">
<div class="box01"></div></body>
</html>
原文地址：http://blog.51cto.com/13742773/2339950
时间： 2024-11-02 09:22:36