jQuery 小案例
用jquery实现 百度换肤的模式;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度换肤</title>
<style>
*{
padding:0;
margin:0;
}
body{
/*width:100%;*/
background:url('../js/2.jpg') no-repeat center 0; /*设置了body的背景图片 然后居中显示 然后只显示一次 */
background-size:cover; /*自适应屏幕大小*/
}
.box{
width:100%;
padding-top: 40px;
background-color: rgb(255,0,0,0.3);
text-align: center;
}
.box img{
width:100px;
/*height:20px;*/
}
</style>
</head>
<body>
<div class="box">
<img src="../js/2.jpg" alt="" id="pic1" >
<img src="../js/1.jpg" alt="" id="pic2" >
<img src="../js/3.jpg" alt="" id="pic3">
<img src='../js/4.jpg' alt="" id="pic4">
<img src="../js/5.jpg" alt="" id="pic5">
</div>
<script type="text/javascript" src="../jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$('.box img').click(function(){ //先获取 你的body下的img
console.log($(this)); //打印这个你点击的图片
var imgUrl = $(this)[0]['src']; //因为你获取的this是一个对象 而且这个对象只有第一条数据是有效果的 所以你取到第一条数据中的图片的路径
console.log($(this)[0]['src']);
$('body').css('background',`url(${imgUrl})`); //把你点击的图片的路径给设置成body的背景图片 并且为了让它能识别出来就用字符串把它拼接起来
$(this).css('width',200).siblings().css('width',100);
})
})
</script>
</body>
</html>
