循环注册点击之更换背景案例

快来打我* 2022-11-22 05:23 131阅读 0赞

## 点击更换背景案例： ##

先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]  
案例中设置了四个按钮，每当点击不同的按钮时背景就随之更换成想相应的图片。

*核心思路如下：*

> 一、利用for循环给四个按钮注册点击事件

> 二、用this关键字（指向方法的调用者）将获取到当前点击按钮的图片的路径传送给背景

`scirpt核心代码如下：`

<script>
            var imgs = document.querySelectorAll('img');
            for (var i = 0; i < imgs.length; i++) { 
                imgs[i].onclick = function () { 
                    document.body.style.backgroundImage = 'url(' + this.src + ')';
                }
            }
        </script>

`HTML结构代码如下：`

<ul class="box">
            <li><img src="images03/b1.jpg"></li>
            <li><img src="images03/b2.jpg"></li>
            <li><img src="images03/b3.jpg"></li>
            <li><img src="images03/b4.jpg"></li>
        </ul>

`CSS样式代码如下：`

<style>
            * { 
                padding: 0;
                margin: 0;
                list-style: none;
            }
            body { 
                background: url("images03/b3.jpg") no-repeat fixed center;
            }
            .box { 
                display: block;
                width: 416px;
                height: 100px;
                margin: 150px auto;
                padding-bottom: 4px;
                background-color: black;
            }
            .box li { 
                float: left;
                width: 100px;
                height: 100px;
                margin: 2px 2px;
                cursor: pointer;
                background-color: lightgoldenrodyellow;
            }
            .box img { 
                width: 90px;
                height: 90px;
                margin-left: 5px;
                margin-top: 5px;
            }
    
        </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c141334f298d4303a40d119202425691.png

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS点击切换背景图

JS点击切换背景图有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_ 2] [

古城微笑少年丶/ 2024年03月31日 15:36/ 0 赞/ 79 阅读

相关 FinalShell更换背景颜色

1. 打开FinalShell点击右上角多功能按键，点击选项 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

墨蓝/ 2022年12月20日 08:54/ 0 赞/ 831 阅读

相关 JS点击文本框改变背景颜色

代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <

╰半夏微凉°/ 2022年12月17日 14:56/ 0 赞/ 245 阅读

相关循环注册点击之更换背景案例

点击更换背景案例：先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

快来打我*/ 2022年11月22日 05:23/ 0 赞/ 132 阅读

相关实现可点击的背景效果

1.首先在/res/drawable 下，建立文件： <?xml version="1.0" encoding="utf-8"?> <selector xml

港控/mmm°/ 2022年09月25日 09:19/ 0 赞/ 196 阅读

相关 JS点击更换网页字体大小

![Image 1][] ![Image 1][]<!DOCTYPE html> <html> <head> <meta charse

「爱情、让人受尽委屈。」/ 2022年05月29日 04:29/ 0 赞/ 134 阅读

相关 js 循环点击事件改变背景颜色

老规矩先看效果: ![70][] 这里使用的ul li标签这里就不上代码了很简单下面就是重要部分： ![70 1][] 使用的js获取id下li标签的长度当然你也可使

绝地灬酷狼/ 2022年05月15日 01:08/ 0 赞/ 426 阅读

相关 javascript点击切换背景颜色和背景大小

css <style> .box{ width: 800px; he

末蓝、/ 2022年02月02日 11:23/ 0 赞/ 399 阅读

相关循环点击

$('.all').on('click',function () { val = $(this).attr('value');

骑猪看日落/ 2022年01月05日 12:47/ 0 赞/ 272 阅读

相关 JS点击事件之电灯开关案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

柔情只为你懂/ 2021年12月12日 21:17/ 0 赞/ 223 阅读