day 16 DOM案例

最新推荐文章于 2024-07-24 22:39:14 发布
最新推荐文章于 2024-07-24 22:39:14 发布
阅读量60 收藏
点赞数
文章标签： css html css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemon_shinning/article/details/124837693
版权

百度换肤

点击更换皮肤，会弹出图片框，点击图片，背景会换成所点击的图片。

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body{
        padding-top: 60px;
        width: 100vw;
        height: 100vh;
        background-color: greenyellow;
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
    }
    nav{
        height: 60px;
        width: 100%;
        background-color: rgba(200, 200, 200, .8);
        top: 0;
        position: fixed;
    }
    nav p{
        height: 60px;
        line-height: 60px;
        font-size: 25px;
        text-align: right;
    }
    .content{
        width: 200px;
        height: 1000px;
        background-color: pink;
        margin: 0 auto;
        text-align: center;
    }
    .wrap{
        display: none;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .1);
        position: fixed;
        justify-content: center;
        align-items: center;
        top: 0;
    }
    .wrap .alert{
        width: 800px;
        height: 300px;
        background-color: #fff;
        position: absolute;
        display: flex;
        justify-content: space-around;
        align-items: center;

    }
    .wrap .alert strong{
        position: absolute;
        top: 0;
        right: 5px;

    }
    .wrap .alert strong:hover{
        cursor: pointer;
        color: skyblue;
    }
    .alert img{
        width: 150px;
        transition: .3s;
    }
    .alert img:hover{
        transform: scale(1.2);
    }
    .checked{
        outline: 2px solid tomato;
    }
    .wrap .alert span{
        position: absolute;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        /* background-color: blue; */
        bottom: 10px;
    }
</style>
<body>
    <nav>
        <p>更换皮肤</p>
    </nav>
    <p class="content">这是内容</p>
    <div class="wrap">
        <div class="alert">
            <strong>X</strong>
            <img src="https://t7.baidu.com/it/u=508006830,4042443322&fm=193&f=GIF" alt="">
            <img src="https://t7.baidu.com/it/u=3029654684,900514866&fm=193&f=GIF" alt="">
            <img src="https://t7.baidu.com/it/u=1451800419,4152544319&fm=193&f=GIF" alt="">
            <img  src="https://t7.baidu.com/it/u=4272803060,4157549139&fm=193&f=GIF" alt="">
            <img  src="https://t7.baidu.com/it/u=604672937,615186004&fm=193&f=GIF" alt="">
            <span>不使用皮肤</span>
        </div>
    </div>
</body>
<script>
    var body = document.querySelector("body");
    var pGh = document.querySelector("nav p");
    var dWrap = document.querySelector(".wrap");
    var del = document.querySelector(".alert strong");
    var imgs = document.querySelectorAll("img");
    var pp = document.querySelector(".alert span");
    var index = -1;
    pGh.onclick = function(){
        dWrap.style.display = "flex";
    }
    del.onclick = function(){
        dWrap.style.display = "none"
    }
    for(var i=0;i<imgs.length;i++){
        imgs[i].xiabiao = i;
        imgs[i].onclick = function(){
           
            if(index === this.xiabiao){
                return ;
            }
            body.style.backgroundImage = `url(${this.src})`;
           

           if(index != -1){
            imgs[index].className = "";
           }
           this.className = "checked";
           index = this.xiabiao;



        }
    }
    pp.onclick = function(){
        // console.log(this)
        body.style.backgroundImage = "";
        imgs[index].className = "";
        index = -1;
    }
</script>
</html>

 手风琴效果

第一张图片默认为展开图片，点击其他图片时，已经展开的图片关闭，所点击的图片展开，并更换相应的背景图。

 

​
<!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;
            list-style: none;
        }
        body{
            width: 100vw;
            height: 100vh;
            background-image: url(https://img2.baidu.com/it/u=2543265134,3617543792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375);
            background-size: cover;
            background-position: center center;
        }
        .wrap{
            width: 800px;
            height: 400px;
            margin: 0 auto;
            background-color: pink;
        }
        .wrap div{
            width: 80px;
            height: 100%;
            float: left;
            background-size: cover;
            background-position: center center;
            transition: .3s;
        }
        .wrap .open{
            width: 480px;
            /* height: 100%; */
        }
        .wrap>div p{
            width: 80px;
            height: 100%;
            background-color: rgba(255, 255, 255, .5);
            font-size: 50px;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="open" style="background-image: url(https://img2.baidu.com/it/u=2543265134,3617543792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375)">
            <p>长白山</p>
        </div>
        <div style="background-image: url(https://img2.baidu.com/it/u=3872400608,2772209323&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500)">
            <p>厦门</p>
        </div>
        <div style="background-image: url(https://img1.baidu.com/it/u=2995749024,1292843217&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500)">
            <p>日落</p>
        </div>
        <div style="background-image: url(https://img0.baidu.com/it/u=1875111408,2138437588&fm=253&fmt=auto&app=138&f=JPEG?w=680&h=383)">
            <p>夜景</p>
        </div>
        <div style="background-image: url(https://img1.baidu.com/it/u=2995749024,1292843217&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500)">
            <p>雪景</p>
        </div>
    </div>
</body>
<script>
    var body = document.getElementsByTagName("body")[0];
    var divs = document.querySelectorAll(".wrap>div");
    
    var showIndex = 0;

    for(var i=0;i<divs.length;i++){
        // console.log(i);
        divs[i].index = i;
        divs[i].onclick = function(){
            // console.log(this.index)
           
            if(showIndex === this.index){
                return ;
            }
            divs[showIndex].className = "";
            this.className = "open";
            showIndex = this.index;

            body.style.backgroundImage = this.style.backgroundImage;
        }
    }
</script>
</html>

​

 

banana tree
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue学习Day9案例
04-30
在这个"Vue学习Day9案例"中，我们重点关注`Src`目录及其子目录`Src_ajax_user`，这通常代表了一个Vue应用的数据获取和用户管理模块。在这个案例中，我们将学习如何通过Ajax技术，尤其是使用Vue.js的内置HTTP接口`...
Day09【JQuery】源码及综合案例
11-04
这个“Day09【JQuery】源码及综合案例”主题将深入探讨 jQuery 的核心机制，并通过实践案例加深理解。 1. **jQuery 的引入与基本用法** - 引入 jQuery：通常通过 `<script>` 标签在 HTML 文件中引入 jQuery 库。 ...
学习Java的日子 Day49 DOM_节点，DOM案例
weixin_69595694的博客
05-27 424
用良心做教育如需删除 HTML 元素，您必须首先获得该元素的父元素。//获取到输入框的value是string类型。并为其绑定****onchange****事件。//创建节点 -
DOM基础详细 包含多个案例
qq_56303170的博客
08-13 748
DOM基础详细 包含多个案例 DOM基础 详细DOM基础详细 包含多个案例一级目录二级目录三级目录DOM树获取元素如何获取元素根据ID获取根据标签名获取获取特殊元素事件基础操作元素改变元素的内容修改src(其他的类似)根据时间，显示不同的问候语和图片表单元素的修改显示和隐藏密码操作元素的大小、颜色及样式行内样式操作循环精灵图显示隐藏文本框内容使用className修改样式属性密码框验证信息排它思想点击图片修改背景全选和单选自定义属性获取自定义属性设置自定义属性移除属性tab栏切换节点操作节点层级父级节点子级
day 15 DOM
lemon_shinning的博客
05-10 84
DOM是什么？你是怎么理解DOM的？ DOM是document object model，文档对象模型。DOM提供了很多对标签进行增删改查的操作。 DOM操作 增： fn createElement(标签名) 创建元素节点 fn setAttribute(name,value) 直接设置属性 fn cloneNode(true、false) true包含子节点、false不包含子节点 fn appendChild() 拼接节点 fn insertBefore(
1.一些DOM操作元素案例
weixin_43324141的博客
04-14 327
DOM案例 鼠标点击显示当前时间： 需求描述：当我们点击了按钮， div里面的文字会动态发生变化 显示当前的时间 用来实现的元素：innerText改变元素内容 +封装一个获取日期函数** 代码： <body> <button>显示当前系统时间</button> <div>某个时间</div> <p&g...
unity天空球插件Time of Day1.8 - Dynamic Sky Dome
06-04
本插件仅限用于学习，商用请移步官方商店。用这个插件可以很方便的模拟一天中的任意时刻、天空的云层变化，可以设置经纬度，使用方便，体积小巧，效果还不错。
田靖宇-day211
08-04
【标题】：田靖宇-day211：DOM-XSS攻击与防护策略 【描述】：本篇笔记主要探讨了DOM型XSS攻击的原理、利用方式以及防御策略，同时还涉及了XSS常见绕过方法和靶场实战案例。 【标签】：网络安全，XSS攻击，DOM型XSS...
网站基本布局CSS
m0_46608027的博客
07-24 758
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 258
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
WebKit引领潮流：CSS环境变量全解析
2401_85342379的博客
07-24 1093
CSS环境变量，也称为CSS自定义属性或CSS变量，是一种在CSS中使用的特殊类型的变量。CSS环境变量是一个强大的CSS特性，它为开发者提供了一种新的方式来创建可维护和可扩展的样式表。通过本文的介绍，读者应该已经了解了CSS环境变量的基本概念、基本语法、使用技巧、浏览器兼容性和性能考虑。通过本文的指导，读者可以开始在自己的项目中尝试使用CSS环境变量，享受更自由的样式定制体验。通过本文的指导，您可以开始在您的网页设计中使用CSS环境变量，提升设计的灵活性和可维护性。在这个例子中，我们定义了两个变量。
CSS实现表格无限轮播
像鱼的博客
07-24 190
在React中，用CSS实现表格无线轮播
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1282
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数
Lovely Ruby 的手账
07-24 327
作用：这个属性是一个非标准的Webkit特定属性，它使得元素使用弹性盒模型（Flexbox的前身）。这允许使用-webkit-line-clamp和-webkit-box-orient属性。示例场景：当你有一个固定宽度的容器，而其中的文本可能包含非常长的单词或URL时，这个属性可以防止文本溢出容器边界。作用：这个属性允许在单词内部进行换行，即使单词很长也不会溢出容器，而是会在必要的地方打断单词以适应容器宽度。示例场景：与-webkit-line-clamp一起使用，确保文本按垂直方向截断。
WebKit的CSS Aspect Ratio Box：重塑响应式设计
2401_85760095的博客
07-24 728
的属性，它允许开发者为元素定义一个理想的宽高比。在WebKit中，这个属性得到了良好的支持，使得开发者可以轻松实现响应式设计。属性在大多数现代浏览器中得到了良好的支持，包括基于WebKit的浏览器如Safari。属性是一个强大的工具，它可以帮助开发者在WebKit和其他现代浏览器中轻松实现响应式设计。属性对性能的影响通常很小，但在一些极端情况下，如大量使用或在性能受限的设备上，过度使用可能会对性能产生一定影响。在这个例子中，所有图片都将保持16:9的宽高比，并且宽度为100%。随着Web技术的发展，
CSS（四）——CSS Text(文本）
最新发布
m0_62701594的博客
07-24 1292
颜色属性被用来设置文字的颜色。
【CSS】盒子模型
小秀的博客
07-24 272
CSS 盒⼦模型中，盒⼦的总⼤⼩由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒⼦模型有两种，分别是标准盒⼦模型和怪异盒⼦模型。CSS 盒⼦模型将每个 HTML 元素表示为⼀个矩形的盒⼦，这个盒⼦包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
掌握JavaScript高级BOM与DOM对象及实战案例
在Day10的JavaScript高级课程中，主要关注两个核心知识点：Browser Object Model (BOM) 和 Document Object Model (DOM)。这两个模型是Web开发中的关键组成部分，对于理解和操纵网页内容以及用户交互至关重要。 BOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值