<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css/animate.min.css"></link>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
*{ margin:0px auto; padding:0px;}
#b1{
width:100%;
height:1024px;
background:url(images/1.jpg);
}
#bgg{
width:100%;
height:250px;
/*background-color:#FF9;*/
position:fixed;
top:100px;
display:none;
}
#bg{
width:600px;
height:250px;
padding-top:20px;
}
#bg img{
width:100px;
height:100px;
float:left;
}
#dj{
width:50px;
height:30px;
background-color:#6FF;
color:#FFF;
text-align:center;
vertical-align:middle;
line-height:30px;
position:absolute;
top:100px;
border-radius:70px;
opacity:0.5;
}
</style>
<script>
$(function(){
$("#dj").click(function(event){
//$("#bgg").fadeIn("3000","linear");
//$("#bgg").slideDown("slow","linear");
$("#bgg").show("1000");//点击显示
//$("#bgg");
event.stopPropagation();//停止其他任意地方的点击事件
});
$(document).click(function() {
$("#bgg").hide(1000);//点击任意地方隐藏
});
$("#bg").on("click", ".img", function(event) {
//$("#b1").attr("style","background");
var c =$(this).attr("c"); //this 表示点击哪里就是哪里
$("#b1").css("background","url(images/"+ c +".jpg)");
event.stopPropagation();//停止其他任意地方的点击事件
});
});
</script>
</head>
<body>
<div id="b1">
<div id="bgg">
<div id="bg">
<img class="img" src="images/0-0.jpg" c="0">
<img class="img" src="images/1-1.jpg" c="1">
<img class="img" src="images/2-2.jpg" c="2">
<img class="img" src="images/3-3.jpg" c="3">
<img class="img" src="images/4-4.jpg" c="4">
<img class="img" src="images/5-5.jpg" c="5">
<img class="img" src="images/6-6.jpg" c="6">
<img class="img" src="images/7-7.jpg" c="7">
<img class="img" src="images/8-8.jpg" c="8">
<img class="img" src="images/9-9.jpg" c="9">
<img class="img" src="images/10-10.jpg" c="10">
<img class="img" src="images/11-11.jpg" c="11">
</div>
</div>
<div id="dj"><b>换肤</b></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="css/animate.min.css"></link>
//这个的应用
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
$(function() {
// infinite
$("#btn").click(function() {
$("div").addClass("infinite animated rotateOutDownLeft");
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;border:1px red solid;"></div>
<hr>
<button id="btn">按钮</button>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
$(function() {
var count = 0;
$("#btn_append").click(function() {
count++;
$("<b>一句话</b>").appendTo("#d1");//往后面加
});
$("#btn_prepend").click(function() {
count++;
$("#d1").prepend("这是第"+count+"句话"); //往前面加
});
});
</script>
</head>
<body>
<button id="btn_append">appendTo</button>
<button id="btn_prepend">prependTo</button>
<hr>
<div id="d1" style="width:500px;height:300px;border:1px red solid;"></div>
</body>
</html>
