JavaScript实现换肤效果(换背景)

本文实例为大家分享了JavaScript实现换肤效果的具体代码，供大家参考，具体内容如下

换肤效果：点击不同图片，更换相应页面背景

实现思路

1、定义一组图片，每个src属性赋值背景图片路径
2、获取一组图片元素对象（得到伪数组）
3、for循环给图片绑定点击事件- - -onclick，事件处理程序中设置body元素对象的背景图片为- - -当前被点击的图片的路径
4、注意：body元素对象的获取为- - -document.body，js为背景图片路径赋值注意路径的拼接- - -document.body.style.backgroundImage = ‘url(' + this.src + ‘)';

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: url(images/壁纸1.jpg) no-repeat center top;
            background-size: cover;
        }

        .box {
            overflow: hidden;
            width: 610px;
            margin: 100px auto;
            background-color: #fff;
        }

        .box li {
            width: 25%;
            height: 100px;
            list-style: none;
            float: left;
            cursor: pointer;
            border: 1px solid #fff;
        }

        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li><img src="images/壁纸1.jpg" alt=""></li>
        <li><img src="images/壁纸2.jpg" alt=""></li>
        <li><img src="images/壁纸3.jpg" alt=""></li>
        <li><img src="images/壁纸4.jpg" alt=""></li>
    </ul>
    <script>
        var pics = document.querySelector('.box').querySelectorAll('img');
        console.log(pics);
        for (var i = 0; i < pics.length; i++) {
            pics[i].onclick = function() {
                console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

页面效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生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:

  • js简单实现网页换肤功能

    我发现网上写换肤功能写的有点长,就想想如何更简单方法实现这个功能,于是我自己写了一个. html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link id="changelink" rel="stylesheet" href="css/default.css&

  • js实现简单的网页换肤效果

    js实现简单的网页换肤效果

    中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了 步骤: 1.在设计HTML代码时,用了一些小技巧,就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同.这样就可以使完成换肤操作简化很多. 2.HTML结构要有一个带id的样式表链接,通过操作该链接的herf属性的值,从而实现换肤 <link rel="stylesheet" href=&

  • AngularJS实现网站换肤实例

    AngularJS实现网站换肤实例

    网站不应该只注重功能,还应该注重用户体验:成熟的大型网站大都具备让用户自行选择主题及颜色的功能,AngularJS也可以做到这点. 效果图: 原理是使用ng-href来动态为网页更换样式: <link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css"> 代码: <!DOCTYPE html> <html ng-app="app&qu

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • js+css简单实现网页换肤效果

    js+css简单实现网页换肤效果

    本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br

  • JavaScript实现换肤功能

    JavaScript实现换肤功能

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

  • JS实现换肤功能的方法实例详解

    JS实现换肤功能的方法实例详解

    本文实例讲述了JS实现换肤功能的方法.分享给大家供大家参考,具体如下: 首先准备HTML页面如下: <div id="container"> <div id="header"> <h3>无人驾驶要征服世界,得先解决这些问题</h3> </div> <div id="nav"> <input type="button" id="blue&qu

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

  • js Dom实现换肤效果

    js Dom实现换肤效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换肤</title> <link rel="stylesheet" href="base.css"> <link

随机推荐