原生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;
    ioImg.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;
    ioImg.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>
    

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

• JS实现换肤功能的方法实例详解
• js Dom实现换肤效果
• jQuery结合jQuery.cookie.js插件实现换肤功能示例
• JavaScript实现换肤功能
• js简单实现网页换肤功能
• js实现简单的网页换肤效果
• AngularJS实现网站换肤实例
• js+css简单实现网页换肤效果
• js动态修改整个页面样式达到换肤效果
• JavaScript实现换肤效果(换背景)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！