JavaScript 网页换肤

今天我们来做网页换肤的一个案例，下面跟着我流程来吧。

下面是HTML布局的代码：

这里我们首先要导入几张图片到我们的文件夹中使用，然后在外层写两个“<div>”标签，一个写位置偏移，一个写样式，接着我们用无序列表来包装这些图片，我们导入这些图片的时候可以直接用“<img>”标签进行链入。

接下来是CSS样式

我们先用全局选择器“*”，先把“margin”和“padding”设为0px，接着选择到body，将宽高都设为100%宽高，接着倒入一张图片，然后在图片后面写上“no-repeat center top” 属性来进行图片的位置调整。

接着选择到我们外层的“<div>”标签的类，先给他设一个宽高，这里设的高度宽度都是不限的，自己觉得好看就行，接着用“margin”设置向中间居中，接下来这些我们就没必要讲太多，自己去调一下就好了。

到了写JS代码的时候了

我们先用var获取到我们的图片，写完之后我们用console.log（）在控制台打印看看获取到了没有，养成一个习惯，接着用for循环遍历这几张图片，然后给他们设上点击事件，

最后这句话为什么外面要加单引号，因为如果不加单引号的话，里面的那句会将以字符串的形式显示出来，这样我们就没有效果，所以要在外面家加上单引号来隔开。

完成图：

我们点击上面图片就可以切换页面图片了。

以上就是本次案例的全部，希望可以得到你们的参考，蟹蟹！

JavaScript 网页换肤相关推荐

JavaScript网页换肤
使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...
JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
一.html/css 1. 什么是盒子模型? padding+border+width/height 2. float 浮动 (1)浮动的特性脱离文档流行内 ...
【JS实现网页换肤】
JS实现网页换肤单击俩个按钮实现网页换肤的功能,如下图所示: <body><button>皮肤1</button><button>皮肤2</bu ...
一键换肤代码html,js实现简单的网页换肤效果
中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了步骤: 1.在设计HTML代码时,用 ...
select学习小demo--实现网页换肤
一,简单版 <body> <header><img src="img/2.jpg" alt="" style="widt ...
JavaScript一键换肤
场景叙述:点击某一个按钮,能够加载一个新的css文件,并且页面进行相应的更改还写了一篇使用alternate stylesheet更改样式的文章,各有优缺使用link的rel属性一键换肤 // in ...
JavaScript中网页换肤
.在电脑桌面打开DW软件 2.点击DW然后创建一个新的布局 3.敲出这些代码即可 4.在打开html就可以看到效果了
JavaScript+Css+Html实现网页换皮肤功能
描述:JavaScript+Css+Html实现网页换皮肤功能原理:使用不同网页背景保存在不同CSS里面,当点击切换的时候通过JavaScript将原来的样式表改为新的CSS就可以完成换肤功能代码 ...
使用js实现换肤功能
Skin.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ ...

JavaScript 网页换肤

JavaScript 网页换肤相关推荐

最新文章

热门文章