原生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 相关文章推荐
jquery异步循环获取功能实现代码
Sep 19 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
详解vue 组件
Jun 11 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 intval的测试代码发现问题
2008/07/27 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
微信小程序时间戳转日期的详解
2019/04/30 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python3.4中清屏的处理方法
2020/07/06 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
信息部岗位职责
2013/11/12 职场文书
护理专业应届毕业生推荐信
2013/11/15 职场文书
法律顾问服务方案
2014/05/15 职场文书
医院合作协议书
2014/08/19 职场文书
五五普法心得体会
2014/09/04 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
加入学生会自荐书
2015/03/05 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL