原生JavaScript实现换肤

 更新时间:2021年02月19日 10:41:06   作者:weixin_44134972  
这篇文章主要为大家详细介绍了原生JavaScript实现换肤,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

原理

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

css样式

<style>
 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;
 }
</style>

HTML源码

<body id="Body">

 <div id="box">
 <ul>
 <li><img src="img/1.jpg" /></li>
 <li><img src="img/2.jpg" /></li>
 <li><img src="img/3.jpg" /></li>
 <li><img src="img/4.jpg" /></li>
 <li><img src="img/5.jpg" /></li>
 </ul>
 </div>

</body>

JavaScript源码

<script>

 var oBody=document.getElementById('Body');
 var oImg=document.getElementsByTagName('img');
 
 for(var i=0;i<oImg.length;i++)
 {
 
 var oImgA=oImg[i];
 oImgA.index=i+1;
 
 oImgA.onclick=function(){
 
 //console.log(this);
 oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';
 oBody.style.backgroundSize='100% 100%'; 
 
 };
 
 }
</script>

效果图

点击切换

源码

<!DOCTYPE>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>换肤</title>
 <style>
 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;
 }
 </style>
</head>
<body id="Body">

 <div id="box">
 <ul>
 <li><img src="img/1.jpg" /></li>
 <li><img src="img/2.jpg" /></li>
 <li><img src="img/3.jpg" /></li>
 <li><img src="img/4.jpg" /></li>
 <li><img src="img/5.jpg" /></li>
 </ul>
 </div>

</body>
</html>


<script>

 var oBody=document.getElementById('Body');
 var oImg=document.getElementsByTagName('img');
 
 for(var i=0;i<oImg.length;i++)
 {
 
 var oImgA=oImg[i];
 oImgA.index=i+1;
 
 oImgA.onclick=function(){
 
 //console.log(this);
 oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';
 oBody.style.backgroundSize='100% 100%'; 
 
 }; 
 }
</script>

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

相关文章

  • 一个不错的字符串转码解码函数(自写)

    一个不错的字符串转码解码函数(自写)

    一个不错的字符串转码解码函数,自己写的,有需要的朋友可以参考下
    2014-07-07
  • 原生js实现随机点名

    原生js实现随机点名

    这篇文章主要为大家详细介绍了原生js实现随机点名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 取得窗口大小 兼容所有浏览器的js代码

    取得窗口大小 兼容所有浏览器的js代码

    我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。
    2011-08-08
  • 小程序两种滚动公告栏的实现方法

    小程序两种滚动公告栏的实现方法

    这篇文章主要介绍了小程序两种滚动公告栏的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • js编写trim()函数及正则表达式的运用

    js编写trim()函数及正则表达式的运用

    js中本身是没有trim函数的,不过你可以自己写一个,下面的实现方法是用到了正则表达式,效率不错,并把这三个方法加入String对象的内置方法中去
    2013-10-10
  • 详解如何使用JavaScript中Promise类实现并发任务控制

    详解如何使用JavaScript中Promise类实现并发任务控制

    在JavaScript中,Promise是一种用于管理异步操作的强大工具,但是,有时候需要更高级的控制,以限制同时执行的任务数量,以避免系统资源超负荷,本文将深入探讨JavaScript中的并发任务控制,并介绍如何创建一个自定义的Promise类——ConcurrentPromise
    2023-08-08
  • webpack4手动搭建Vue开发环境实现todoList项目的方法

    webpack4手动搭建Vue开发环境实现todoList项目的方法

    这篇文章主要介绍了webpack4手动搭建Vue开发环境实现todoList项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 使用pcs api往免费的百度网盘上传下载文件的方法

    使用pcs api往免费的百度网盘上传下载文件的方法

    百度个人云盘空间大,完全免费,而且提供了pcs api供调用操作文件,在平时的项目里往里面保存一些文件是很实用的。通过本文给大家介绍使用pcs api往免费的百度网盘上传下载文件的方法,感兴趣的朋友一起学习吧
    2016-03-03
  • JS获取地址栏参数的两种方法(原生、vue)

    JS获取地址栏参数的两种方法(原生、vue)

    这篇文章主要介绍了JS获取地址栏参数的两种方法(原生、vue),文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • JS使用定时器与事件监听实现轮播图切换功能

    JS使用定时器与事件监听实现轮播图切换功能

    现在很多网站都有轮播图,下面这篇文章主要给大家介绍了关于JS如何使用定时器与事件监听实现轮播图切换功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论