html和css部分

<style>* {margin: 0;padding: 0;}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="data:images/1.jpg"></li> /*图片大家可以自行更换哦*/<li><img src="data:images/2.jpg"></li><li><img src="data:images/3.jpg"></li><li><img src="data:images/4.jpg"></li></ul>

JavaScript部分

<script>var imgs = document.querySelector('.baidu').querySelectorAll('img');for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// this.src 就是我们点击图片的路径   images/2.jpg// console.log(this.src);// 把这个路径 this.src 给body 就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>

一个简单的百度换肤效果相关推荐

排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色
排他思想 – 百度换肤效果案例以及点击某按钮只是该按钮变色 1.百度换肤 <!DOCTYPE html> <html lang="en"> <he ...
一键换肤代码html,js实现简单的网页换肤效果
中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了步骤: 1.在设计HTML代码时,用 ...
js实现百度换肤效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
script-百度换肤效果
百度换肤效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
android l风格皮肤,基于Android-Skin-Loader实现换肤效果
skin-loader框架的换肤是通过插件化的形式替换资源文件,实现换肤效果.好处是可以在线更新皮肤换肤 Demo样例流程整个框架大概的流程是加载皮肤包,找到被标记的控件,通过自定义的Factor ...
一个简单的百度爬虫实例
一个简单的百度爬虫实例最近在百度aistdio自学课程,看到一个基础课程的作业是爬取百度上<青春有你>选手信息,索性就跟着爬了一下,复习一下自己去年自学的已经忘得差不多的爬虫. 直接上代 ...

一个简单的百度换肤效果

一个简单的换肤效果

html和css部分

JavaScript部分

一个简单的百度换肤效果相关推荐

最新文章

热门文章