<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: url(images/1.jpg) no-repeat center top;
}
li{
list-style:none;
}
. baidu{
overflow:hidden;
margin:100px auto;
background -color:#fff;
width:410px;
padding-top:3px;;
}
. baidu li{
float:left;
margin:0 1px;
cursor;pointer;
}
.baidu img{
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2. jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
//1.获取元素对象集合
var imgs document. queryselector(‘. baidu’). queryselectorall(‘img’);
/2.循环注册事件3.执行事件程序
for (var i=0; i <imgs. length; i++){
为每一个元素对象绑定事件处理事件程序
imgs[i]οnclick= function(){
//修改样式属性this. src imgs[i].src
document. body. style. backgroundimage ‘url(’+ this. src +‘)’;
}
}
</script>
</body>
1200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
