原生JavaScript实现换肤


Posted in Javascript onFebruary 19, 2021

原生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>

效果图

原生JavaScript实现换肤

点击切换

原生JavaScript实现换肤

源码

<!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>

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

Javascript 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
基于vue的video播放器的实现示例
Feb 19 #Vue.js
JavaScript Dom实现轮播图原理和实例
Feb 19 #Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 #Javascript
react项目从新建到部署的实现示例
Feb 19 #Javascript
原生JavaScript实现幻灯片效果
Feb 19 #Javascript
JavaScript 实现继承的几种方式
Feb 19 #Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 #Javascript
You might like
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
学习JavaScript鼠标响应事件
2015/12/25 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python实现进程间通信简单实例
2014/07/23 Python
Python常用类型转换实现代码实例
2020/07/28 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python的setattr函数实例用法
2020/12/16 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
DBA的职责都有哪些
2012/05/16 面试题
生态学毕业生自荐信
2013/10/27 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
客户表扬信范文
2014/01/10 职场文书
高中班级口号
2014/06/09 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python