原生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 相关文章推荐
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
基于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获取url的函数代码
2011/08/02 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php查询及多条件查询
2017/02/26 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python callable内置函数原理解析
2020/03/05 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
物业总经理助理岗位职责
2014/06/29 职场文书
毕业生工作求职信
2014/06/30 职场文书
行政求职信
2014/07/04 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
奠基仪式致辞
2015/07/30 职场文书
springcloud整合seata
2022/05/20 Java/Android