生物多样性---鸟类相册

最新推荐文章于 2024-07-09 17:50:54 发布

Dusk_L&U

最新推荐文章于 2024-07-09 17:50:54 发布

阅读量844

点赞数 18

分类专栏： web开发文章标签：前端 css javascript web

本文链接：https://blog.csdn.net/m0_74299308/article/details/135660627

版权

web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript创建一个简易的鸟类相册，包括代码实现、效果展示、遇到的问题与解决方案，以及作者在过程中学到的技术和经验。

摘要由CSDN通过智能技术生成

前言

鸟类是地球上一个得天独厚的重要成员和庞大群体，如今越来越多的鸟类成为濒稀物种，请你用web相关知识做一个简易鸟类相册留下他们的足迹...

一、代码

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>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        
.test{
    list-style:none;
}
.test li{
    position: relative;
    float:left;
    width: 150px;
    margin-left: 3px;
}

.test a{
    display: block;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.test a:link{
    color: black;
    background: #ccc;
    text-decoration: none;
}

.test a:visited{
    color: #000;
    text-decoration: underline;
}

.arrow{
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(43, 130, 156);
    border-right: 10px solid transparent;
    position: absolute;
    left: 25px;
    top:20px;
}

.test a:hover{
    color: #fff;
    font-weight:bold;
    text-decoration: underline;
    background: red;
}

.test a:hover .arrow{
    color: rebeccapurple;
}
    </style>
</head>
<body>
    <h1>《国家一级鸟类相册》</h1>
    <ur class="test">
        <li><a href="1"><div class="arrow"></div>鸟类</a></li>
        <li><a href="2"><div class="arrow"></div>标记</a></li>
        <li><a href="3"><div class="arrow"></div>收藏</a></li>
        <li><a href="4"><div class="arrow"></div>更多</a></li>
        <li><a href="5"><div class="arrow"></div>附近</a></li>
        <li><a href="6"><div class="arrow"></div>其他</a></li>
    </ur>
    <p>Choose an image</p>
    <ul>
        <li>
            <a href="image/黄胸鹀.jpg" title="黄胸鹀---黄胸鹀是雀形目雀科鹀属鸟类， [22] 又名黄胆、禾花雀。 [23] 雄鸟额、头顶、颏、喉黑色；头顶和上体栗色或栗红色；
            尾黑褐色，外侧两对尾羽具长的楔状白班；两翅黑褐色，翅上具一窄的白色横带和一宽的白色翅斑；下体鲜黄色，胸有一深栗色横带。雌鸟上体棕褐色或黄褐色，具粗著的黑褐色中央纵纹；
            腰和尾上覆羽栗红色，两翅和尾上覆羽黑褐色，中覆羽具宽阔的白色端斑，大覆羽具窄的灰褐色端斑亦形成两道淡色翅斑；眉纹皮黄白色；下体淡黄色，胸无横带，两胁具栗褐色纵纹。 [24]
            黄胸鹀分布于欧洲和亚洲，在中国东北、新疆、华北、海南岛、台湾等地区也能看到其身影。栖息于低山丘陵至平原有稀疏树木的灌丛草甸，尤喜河谷湿地附近。繁殖期内单独或成对活动，
            繁殖期外成群活动，迁徙期间可形成数千只的大群。繁殖季主食大量昆虫，迁徙期间主要吃农作物和其他植物种实。繁殖期在5—7月，窝卵数通常4—5枚，卵灰绿色且有褐斑。孵化期约13天，
            雏鸟13—14天可离巢。 [25]黄胸鹀被《世界自然保护联盟濒危物种红色名录》（IUCN）列为极危（CR）物种； [26] 被列入中国《国家保护的有益的或者有重要经济、科学研究价值的陆生野生动物名录》；
             [23] 属中国国家一级重点保护野生动物。"  onclick="return showPic(this)">
                <img src="image/黄胸鹀.jpg" width="90" height="120" alt="">黄胸鹀
             </a>      
        </li>
        <li>
            <a href="image/栗斑腹鹀.png" title="栗斑腹鹀---斑腹鹀最显著的特点就是腹部明显的栗色斑块，因为数量稀少且近年来又迅速减少，2010年，世界自然保护联盟将其列为濒危鸟类。
            此外，它还是国家保护的有益的或者有重要经济、科学研究价值的陆生野生动物名录收入的动物之一。" onclick="return showPic(this)">
               <img src="image/栗斑腹鹀.png" width="90" height="120" alt="">栗斑腹鹀</a>
        </li>
        <li>
            <a href="image/灰胸薮鹛.jpg" title="灰胸薮鹛---灰胸薮鹛（学名：Liocichla omeiensis）是噪眉科、薮鹛属小型鸟类。体长15-20厘米。头顶灰色，前额和眉纹、后颈和颈侧橘黄色，耳羽和下体灰色，腹中黄色。
            上体灰橄榄黄色，飞羽黑色具红色和黄色翅斑。尾橄榄褐色具黑色横斑和红色端斑，尾下覆羽黑色具红色端斑。特征极为明显，野外容易识别。嘴、脚褐色或棕褐色。 [1]
            灰胸薮鹛主要栖息于海拔2400米以下的常绿阔叶林、次生林、竹林和林缘灌丛中，常在林下灌丛中或地上活动或觅食。胆小畏人，通常藏匿于茂密灌丛、竹丛或小乔木树冠内，
            占区鸣叫时通常只闻其声不见其形，一旦发现有人接近就停止鸣唱或立即飞走。主要以昆虫和植物果实与种子为食。
            仅见于中国四川中西部天全、雅安、峨眉、马边、峨边、屏山和二郎山一带。" onclick="return showPic(this)">
                <img src="image/灰胸薮鹛.jpg" width="90" height="120" alt="">灰胸薮鹛</a>
        </li>
        <li>
            <a href="image/灰冠鸦雀.jpg"" title="灰冠鸦雀---灰冠鸦雀（学名：Sinosuthora przewalskii）是莺科、鸦雀属小型鸟类，体长13-15厘米。嘴粗厚而短，似鹦鹉嘴，头顶灰色，前额和眼先黑色，
            眉纹黑褐色，眼周棕褐色。背橄榄黄色，飞羽具黄色羽缘。喉、胸棕褐色，其余下体淡黄色。虹膜砖红色或赭黄色，嘴粉红色，上嘴端斑白色，下嘴微沾黄色，脚蓝灰色。
            [1] 灰冠鸦雀主要栖息于海拔2000-3500米的针叶林和针阔叶混交林和竹丛中，也栖息于林缘疏林灌丛和草丛中，常在林下灌木低枝上或草丛中活动和觅食。主要仍以昆虫和植物果实与种子为食。
            灰冠鸦雀是中国特产鸟类，仅分布于甘肃（岷县、卓尼、舟曲）和四川（九寨沟县、青川县、平武县）。" onclick="return showPic(this)">
                <img src="image/灰冠鸦雀.jpg" width="90" height="120" alt="">灰冠鸦雀</a>
        </li>
        <li>
            <a href="image/棕头歌鸲.jpg" title="棕头歌鸲---棕头歌鸲是一种体长14.5厘米的鸟类，属于雀形目、鹟科、歌鸲属。它是一种冬候鸟或迷鸟，分布于马来西亚以及中国大陆的陕西、四川等地。
            棕头歌鸲多生活于海拔2400米处的杉、桦、杨、山柳和樱桃等灌杂木的地上。该物种的模式产地在陕西南部太白山。棕头歌鸲的学名有两个，分别是Luscinia ruficeps和Larvivora ruficeps。
            它属于鹟科歌鸲属，是一种极善鸣叫的鸟类。棕头歌鸲的自然栖息地包括温带森林和温带灌丛。由于栖息地的破坏，这种鸟类可能面临威胁。" onclick="return showPic(this)">
                <img src="image/棕头歌鸲.jpg" width="90" height="120" alt="">棕头歌鸲</a>
        </li>
        <li>
            <a href="image/白腹海雕.webp" title="白腹海雕---白腹海雕是大型猛禽，翼宽长型，尾短，头部、颈部和下体都是白色，背部为黑灰色。尾羽呈楔形，呈褐色，端部白色，
            是它与其他海雕相区别的主要特征之一。飞翔时从下面看，通体除飞羽和尾羽的基部为黑色外，其余全部为白色，黑白分明，极为醒目。在飞行时，黑色的翅膀跟白色的腹部形成强烈的对比。
            像所有海雕属的成员一样，其尾部很短，呈楔子状。虹膜为褐色，蜡膜和上嘴为红灰色，下嘴蓝灰色，尖端黑色，嘴裂为红蓝色，跗跖和趾为淡肉色，爪黑色。头、颈及下体白色，背羽灰褐；
            尾楔形，基部l/3为灰黑色，其余白色；肩及翼覆羽与背羽同色，飞羽黑褐；翼下覆羽近白，飞翔时可见前白、后褐的翅。嘴铅黑色，脚黄。
            幼鸟上体暗褐，下体棕褐而微具淡纹，尾近白。大小量度：体长710-840克；嘴峰48-55毫米；翅♂526-589毫米，♀588-606毫米；尾208-260毫米；跗蹠92-99毫米。
            （注：♂雄性；♀雌性） [3]" onclick="return showPic(this)">
                <img src="image/白腹海雕.webp" width="90" height="120" alt="">白腹海雕</a>
        </li>
    </ul>
   
    <img id="placeholder" width="550" height="450" src="image/placeholder.jpg"  alt="my image gallery">
    
    <p id="description">
        <img src="image/鸟.png" alt="">
    </p>
    <script src="bird.js"></script>
</body>
</html>

CSS代码：

body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(179, 14, 2);
    background-color: transparent;
    font-weight: bold;
    border: 5px solid rgb(247, 243, 243);
    background-color: rgb(19, 19, 18);
    margin: 1em 10%;
}
h1{
    color: rgb(48, 45, 218);
    background-color: transparent;
    text-align: center;
}
a{
    color: aquamarine;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul{
    padding: 0;
}
li{
    float: left;
    padding: 1em;
    list-style: none;
}
#description{
    height: 450px;
    width: 580px;
    background: #FFFFFF;
    position: absolute;
    right: 150px;
    top: 320px;
    box-shadow: 10px 10px 20px #888;
    background-image: url("image/鸟.jpg");
}

JS代码：

function showPic(whichPic){
        let source=whichPic.getAttribute("href")
        //(whichPic指向<a>元素，调用getAttribute得到"href"的参数
        let placeHolder=document.getElementById("placeholder")
        //获取占位图片
        placeHolder.setAttribute("src",source)
        //将获得的href替换掉src，写入js文件
        let text=whichPic.getAttribute("title")
        let description=document.getElementById("description")
        //description.firstChild.nodeValue=text;
        description.innerHTML=text;
        return false;
    }

二、效果展示

在这里插入图片描述

三、总结

实验思路

这次实验用到了JS的知识，根据老师课堂放的视频去写代码，最顶部是标题，再往下是一个目录栏（此目录栏只为充实页面没有做功能），然后就是给出素材图片，再任意一张图片作为my
image gallery，当点到对应的鸟类的时候my image gallery就再现指定的鸟类图片，旁边那个边框就是鸟类的简介。

遇到的问题

①监视器οnclick="return showPic(this)这行代码return有波浪线，无法链接到js（无法return），运行后my image gallery不会再现指定的鸟类图片而是另外打开一个页面展示图片？
在这里插入图片描述

解决：首先检查了html中是否链接了js，发现链接了，再检查关于监视器的代码是否写对，写对了，再检查js代码是否正确，经过仔细检查，发现粗心写错了placeHolder，所以html里面返回不了。改正之后οnclick="return showPic(this)这行代码return仍有波浪线，但运行没问题，猜测可能是vs在我的电脑上有问题？
在这里插入图片描述

②如何把简介也链接过来？
解决：简介也放title里面，通过鼠标监听器获取内容一起显示。

③怎样调整简介的位置，使在图片下方的简介变为在图片右边？
在这里插入图片描述
解决：设置一个容器，命名为description，然后通过js将内容指向这个id为description的内容里，这里的js主要实现将原来的位置转移到另一个位置进行展示的作用。

在这里插入图片描述

四、收获

用setAttribute和getAttribute设置和获取模拟登陆的界面。
getAttribute()方法返回指定属性名的属性值接受一个参数。注：通过对象获取属性，只能获取到原始属性；
setAttribute()方法接受两个参数：要设置的特性名和值。如果特性已存在，将替换原有的值。
document.getElementById是一个document对象的方法，可以通过它来获得指定id的html元素。
description.innerHTML=text;和description.firstChild.nodeValue=text;效果等同。对于innerHTML输出的是所有原始内容，所以，当然也会获取隐藏标签及其文本。
description.firstChild.nodeValue=text;意思就是将description对象的第一个子节点的nodeValue的属性值变换为text的值。
在图片库链接上点击触发的动作需要用到onclick事件处理函。使用this关键字代表“这个对象，showPic（this）表示对这个a元素使用函数。调onclick就为 οnclick=“showPic(this);”注意引用了事件处理函数到链接后，会遇到这么个情况：点击了链接，不仅showPic函数被调用,同时默认的弹窗图片行为也会出现。因此需要阻止默认行为。点击这个链接会触发两种情况，因此我们需要点击出现showPic函数同时让链接认为它没有被点击到。给onclick应用返回布尔值true跟false。
return true是 onclick认为这个链接被点击到；
return false是onclick认为这个链接没有被点击到；
οnclick=“showPic（this）；return false；”