java web换肤_原生JavaScript实现换肤

柔光的暖阳◎ 2022-11-06 10:50 228阅读 0赞

原生JavaScript实现换肤的具体代码，供大家参考，具体内容如下

原理

通过点击事件，获取点击的的图片的信息，在HTML背景图片的路径改变

css样式

body\{

margin:0;

padding:0;

background:url(img/1.jpg) no-repeat;

background-size:100% 100%;

\}

\#box\{

width:100%;

height:130px;

background:\#999999;

\}

\#box ul\{

margin:0;

padding:0;

list-style:none;

\}

\#box ul li li,\#box ul li img\{

width:180px;

height:120px;

float:left;

margin:5px 60px;

\}

HTML源码

*  ![1.jpg][]
 *  ![2.jpg][1.jpg]
 *  ![3.jpg][1.jpg]
 *  ![4.jpg][1.jpg]
 *  ![5.jpg][1.jpg]

JavaScript源码

var oBody=document.getElementById('Body');

var oImg=document.getElementsByTagName('img');

for(var i=0;i

\{

var oImgA=oImg\[i\];

oImgA.index=i+1;

oImgA.οnclick=function()\{

//console.log(this);

oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';

oBody.style.backgroundSize='100% 100%';

\};

\}

效果图

![b4cfde91e399a79bee66277a224ba62c.png][]

点击切换

![e1fc833877e9783269e5356803863540.png][]

源码

换肤

body\{

margin:0;

padding:0;

background:url(img/1.jpg) no-repeat;

background-size:100% 100%;

\}

\#box\{

width:100%;

height:130px;

background:\#999999;

\}

\#box ul\{

margin:0;

padding:0;

list-style:none;

\}

\#box ul li li,\#box ul li img\{

width:180px;

height:120px;

float:left;

margin:5px 60px;

\}

*  ![1.jpg][]
 *  ![2.jpg][1.jpg]
 *  ![3.jpg][1.jpg]
 *  ![4.jpg][1.jpg]
 *  ![5.jpg][1.jpg]

var oBody=document.getElementById('Body');

var oImg=document.getElementsByTagName('img');

for(var i=0;i

\{

var oImgA=oImg\[i\];

oImgA.index=i+1;

oImgA.οnclick=function()\{

//console.log(this);

oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';

oBody.style.backgroundSize='100% 100%';

\};

\}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[1.jpg]: 
[b4cfde91e399a79bee66277a224ba62c.png]: /images/20221023/713fc2cf2ec94943b3fa918fbba5c5b1.png
[e1fc833877e9783269e5356803863540.png]: /images/20221023/3e8d9642f57c4fcca629267a9fe35370.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js练习网页换肤

原生js练习网页换肤 -------------------- 写的很烂，没有要点 -------------------- 效果： ![在这里插入图片

「爱情、让人受尽委屈。」/ 2023年06月09日 03:52/ 0 赞/ 2 阅读

相关 java web换肤_原生JavaScript实现换肤

原生JavaScript实现换肤的具体代码，供大家参考，具体内容如下原理通过点击事件，获取点击的的图片的信息，在HTML背景图片的路径改变 css样式 body\{

柔光的暖阳◎/ 2022年11月06日 10:50/ 0 赞/ 229 阅读

相关 Android实现换肤思路整理

Android实现换肤思路整理整体思路总结： 1.获取APP 的Resources对象 2.使用反射创建AssetManager对象

水深无声/ 2022年10月28日 10:29/ 0 赞/ 178 阅读

相关 vue less 换肤

> 配置几套主题色，通过修改body class来实现，由于我是在组件库中使用的，以下为核心代码 switch-theme 子组件 <template>

川长思鸟来/ 2022年10月20日 13:51/ 0 赞/ 202 阅读

相关 Winform换肤原理

前两天跟着做村级节水系统，在其中遇到了换肤功能的实现。所以，想具体了解一下换肤原理。跟踪代码，Winform换肤的实现主要是读取换肤的配置文件，然后重绘所有所有窗体

淩亂°似流年/ 2022年09月20日 15:26/ 0 赞/ 285 阅读

相关安卓换肤功能实现

Hi,大家好，快元旦啦，提前祝大家元旦快乐，(\^\_\_^\) 嘻嘻，今天给大家分享的是Apad Qzone换肤功能的实现，我们首先看下效果: ![0_1325249978

比眉伴天荒/ 2022年08月23日 11:52/ 0 赞/ 267 阅读

相关 Android主题换肤实现

本系列文章主要是对一个Material Design的APP的深度解析，主要包括以下内容基于Material Design Support Library作为项目整体

秒速五厘米/ 2022年08月22日 12:24/ 0 赞/ 263 阅读

相关百度换肤技术

结合右击显示菜单来做的效果图： ![SouthEast][] 代码： <!doctype html> <html> <hea

ゝ一世哀愁。/ 2022年08月18日 12:23/ 0 赞/ 262 阅读

相关 vue+ element 动态换肤

转至 [https://www.cnblogs.com/dengqichang/p/10364455.html][https_www.cnblogs.com_dengqicha

た入场券/ 2021年12月22日 10:47/ 0 赞/ 454 阅读

相关 Jquery换肤效果

Jquery换肤效果简介：自从Web2.0开始流行后，很多网站更加注重用户自定义，例如在网页上用户自定义新闻内容，可以任意拖动网页内容，也可以给网页选择一套自己喜

偏执的太偏执、/ 2021年09月17日 01:24/ 0 赞/ 439 阅读