html实现百度换肤,百度换肤

百度换肤

html,

body,

div {

margin: 0;

padding: 0;

}

body {

width: 100%;

background: url(../images/01.jpg);

}

.back {

width: 100%;

height: 200px;

background: rgba(228, 168, 168, 0.3);

text-align: center;

}

.back img {

height: 200px;

}

// 页面刚刚打开的时候

// 如果是第一次访问这个网站，肯定没有这个记录，那么会得到null

var url = localStorage.getItem('url');

if (url) {

//赋值给body

document.body.style.background = "url(" + url + ")";

}

//先找到所有a标签

var aList = document.getElementsByTagName('a');

// 遍历每个a，给它们加点击事件

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

aList[i].onclick = function () {

// 给body的背景图片

document.body.style.background = "url(" + this.href + ")";

// 把图片路径保存到localStorage

localStorage.setItem('url', this.href);

return false;

}

}