html 点击图片查看,点击图片.html

Document

body {

background: url(C:/users/鹿与折耳猫/desktop/jsapis_material/第二天/images/1.jpg)

no-repeat;

}

.ul1 {

overflow: hidden;

margin: 100px auto;

background-color: #fff;

width: 410px;

padding-top: 3px;

padding-left: 3px;

}

* {

margin: 0;

padding: 0;

}

.ul1 li {

list-style: none;

float: left;

margin: 0 1px;

cursor: pointer;

}

.ul1 img {

width: 100px;

height: 100px;

}

• src="C:\Users\鹿与折耳猫\Desktop\jsapis_material\第二天\images\1.jpg"

  alt=""

  />

• src="C:\Users\鹿与折耳猫\Desktop\jsapis_material\第二天\images\2.jpg"

  alt=""

  />

• src="C:\Users\鹿与折耳猫\Desktop\jsapis_material\第二天\images\3.jpg"

  alt=""

  />

• src="C:\Users\鹿与折耳猫\Desktop\jsapis_material\第二天\images\4.jpg"

  alt=""

  />

var imgs = document.querySelector("ul").querySelectorAll("img");

for (var i = 0; i < imgs.length; i++) {

imgs[i].onclick = function () {

document.body.style.backgroundImage = "url(" + this.src + ")";

};

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史