原生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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
微信小程序云开发详细教程
May 16 Javascript
了解javascript中的Dom操作
May 27 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python实现各种排序算法的代码示例总结
2015/12/11 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Python实现Restful API的例子
2019/08/31 Python
Python测试线程应用程序过程解析
2019/12/31 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
租赁意向书范本
2014/04/01 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
质量负责人任命书
2014/06/06 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
租房协议书范文
2014/08/20 职场文书
单位在职证明书
2014/09/11 职场文书
返乡农民工证明
2015/06/24 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
2019年入党思想汇报
2019/03/25 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书