百度换肤怎么实现的html,JavaScript 实现百度换肤功能

运用场景

平时很常用，在很多的网页上边我们都可以看到切换皮肤的功能，所以今天我们来实现以下

效果

选中第一个图片时

image.png

选中第二个图片时

image.png

具体思路

当我们点击这个皮肤的图片时，就让它运用到我们的网页效果上边，具体的操作步骤就是给每一个图片新建一个点击事件，当我们触发这个事件的时候就要把这个事件对应的图片的src就是链接应用在网页body的backgroundImage 这个属性上边就可以改边这个背景

上代码

body{

background-image: url('1.jpg');

}

img{

width: 100px;

height: 100px;

}

li{

display: inline;

}

// 获得到所有的img标签

var imgs = document.getElementsByTagName('img')

// 利用循环的方式，把每一个图片对象设置上点击事件，并修改背景图片

for (var i = 0; i

imgs[i].onclick = function(){

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

}

百度换肤怎么实现的html,JavaScript 实现百度换肤功能相关推荐

JavaScript大法第一式--换肤实践
犹如百度页面进行换肤 1.jQuery简单页面于是,我们简单做了一个类似功能的代码: <!DOCTYPE html> <html lang="en"> & ...
android 换肤（1）——插件式无缝换肤（解析鸿洋大神的换肤流程）
对于app换肤,这是一个常见而又常用的功能.虽然我做的项目中还没涉及到换肤,但是还是想研究下. 于是,下载了鸿洋大神的换肤demo来研究. 先看效果图:(尊重鸿洋大神的代码,效果图上原创) 鸿洋大神的 ...
关于ArcGis for javascript整合百度地图天地图高德地图进行搜索
1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api 1  2 <script type=" ...
html插入地图的方法,JavaScript接入百度地图API的方法步骤
一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用创建好应用以后就能在控制台我的应用中看到这个应 ...
javascript调用百度地图api
百度地图提供sdk,javascript api等多种客户端调用方式,通常在网页上用的比较多,也就是javascript api,这里根据自己的使用,简单介绍一下如何快速使用javascript调用百 ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)
坐标采集前言 1.百度地图地理坐标拾取系统 2.位置选择插件百度地图经纬度选择插件默认参数配置 3.数据导入 4.地理编码爬取百度webAPI 返回参数前端封装转换函数 5.手机GPS定位 ...
JavaScript 一元钱可以买一瓶水，两个空瓶可以换一瓶水，三个瓶盖可以换一瓶水，20块钱可以换多少瓶水。
<script>// 一元钱可以买一瓶水,两个空瓶可以换一瓶水,三个瓶盖可以换一瓶水,20块钱可以换多少瓶水.function maiS(money) {var water = money ...
百度和吉利合作造车，数据揭秘百度造车、拆股背后逻辑
开始了,开始了,互联网造车又起风,百度造车迈出了实质性的一步. 日前,媒体报道的百度造车公司已完成注册,名称为集度汽车有限公司,品牌释义为"集百度AI能力之大成". 集度注册资本为 ...
百度地图api开发详解(android版).pdf,百度地图API开发指南原版.pdf
百度地图API开发指南原版百度地图 API 开发指南百度地图 API 开发指南目录简介 3 什么是百度地图 API 3 面向的读者 3 获取 API 3 开发移动平台上的地图应用 3 兼容性 ...

百度换肤怎么实现的html,JavaScript 实现百度换肤功能

百度换肤怎么实现的html,JavaScript 实现百度换肤功能相关推荐

最新文章

热门文章