原生JavaScript实现换肤_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;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>

效果图

点击切换

源码

<!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 数组精简技巧小结
  • 老生常谈js中的继承及实现代码
  • javascript代码编写需要注意的7个小细节小结
  • js前端笔试题分析
  • 微信小程序使用progress组件实现显示进度功能【附源码下载】
  • js读取cookie方法总结
  • javascript实现的一个自定义长度的文本自动换行的函数。
  • js实现进度条的方法
  • 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
  • select自定义小三角样式代码(实用总结)
  • javascript的换肤问题
  • 原生javascript,想要实现AB切换效果
  • 用javascript给网页换肤,能在不同的浏览器上看是...
  • 我用js代码给页面换肤,样式是出来了,但是也把页...
  • 怎样用js cookie实现换肤效果?求大神指点
  • 想用JavaScript实现DIV样式切换
  • 如何用js改变多个框架的css,也就是让网页整体换肤?
  • 如何用js改变多个框架的css,也就是让网页整体换肤
  • 用javascript实现网页背景变色
  • 如何用代码网页换肤
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs实现换肤功能的方法实例详解js dom实现换肤效果jquery结合jquery.cookie.js插件实现换肤功能示例javascript实现换肤功能js简单实现网页换肤功能js实现简单的网页换肤效果angularjs实现网站换肤实例js+css简单实现网页换肤效果js动态修改整个页面样式达到换肤效果javascript结合css实现网页换肤功能javascript实现动态css换肤技术的脚本换肤测试程序js脚本javascript 数组精简技巧小结老生常谈js中的继承及实现代码javascript代码编写需要注意的7个小细节小结js前端笔试题分析微信小程序使用progress组件实现显示进度功能【附源码下载】js读取cookie方法总结javascript实现的一个自定义长度的文本自动换行的函数。js实现进度条的方法使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例select自定义小三角样式代码(实用总结)js刷新页面方法大全js删除数组里的某个元素方法js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js保留两位小数方法总结js获取及修改网页背景色和字体色的方法js实现自动变换的菜单效果代码javascript中this关键字的一些小知识用radiobutten或checkbox实现div的显示与微信小程序版翻牌小游戏如何在javascript中正确处理变量详解js中的立即执行函数微信小程序模拟cookie的实现浅谈javascript的全局变量与局部变量javascript使用localstorage存储数据
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved