网页旅游景点页面建设

最新推荐文章于 2025-02-19 19:32:19 发布

飞宇千虹

最新推荐文章于 2025-02-19 19:32:19 发布

阅读量3.7k

点赞数 5

文章标签： javascript html html5 jquery

本文链接：https://blog.csdn.net/weixin_45924250/article/details/114263642

版权

网页旅游景点页面建设

页面展示
在这里插入图片描述

在这里插入图片描述

打开网页后布局如图一所示，从上到下依次为景区搜索栏，轮播图和景区列表。用户可以根据自己的爱好查看相关的景点，点开后的介绍内容如图三所示——内容加上文字说明。
开发者若想更改对应的内容，可在js\data.js修改文字和图片的内容。

主要代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,
    minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta charset="UTF-8">
    <title>景区列表</title>
    <script type="module"></script>
    <script src='js/jquery-3.4.1.min.js'></script>                              <!-- JQuery库 -->
    <script src="js/load.js"></script>                                          <!-- 加载主页面 -->
    <script src="js/event.js"></script>                                         <!-- 添加事件 -->
    <script src="js/fitSize.js"></script>                                       <!-- 适应宽度 -->
    <script src="js/data.js"></script>                                          <!-- 景区信息  -->
</head>
<body></body>
<script src="js/index.js"></script>                                             <!-- 调用js -->
<link rel="stylesheet" href="css/public.css">                                   <!-- 公共样式库  -->
<link rel="stylesheet" href="css/index.css">                                    <!-- 公共样式库  -->
</html>

一个个模块已经被抽取出来了，所以body的内容很少。

scenery = {
    "mode":[{
        "section" :{
            "id":1,
            "name":"曹操运兵道",
            "content":[{
                "img":"./img/scenery/ccybd/1.jpg",
                "text":"  曹操运兵道以大隅首为中心，向四面延伸，分别通达城外，全长六千余米，现对外开放700米。曹操运兵道始建于东汉末年，相传为曹操所建。" +
                    "整个地道经纬交织，纵横交错，布局奥妙，规模庞大，远远超过地面上保留的一座古老城池的价值，被誉为“地下长城”，是世界军事史上的奇迹。"
            },{
                "img":"./img/scenery/ccybd/2.jpg",
                "text":"现存古地道，由于年代久远，并非一个时代修筑使用，结构不一，宽窄不同，高低不等。距地表深度3-5米，最深处超过7米。道内结构有土木结构、砖土结构、砖木结构、全砖结构。"
            },{
                "img":"./img/scenery/ccybd/3.jpg",
                "text":" 道行有单行道、平行双道、上下两层道、立体交叉道等几种形式。道内高一般在1.6-2.1米之间，宽0.6-0.9米，道内转弯处均为“T”型道口连接，平行双道相距约2-3.5米，中间砌有方形传话孔，设有猫耳洞、掩体、障碍券、绊腿板、陷阱等军事设施，还有通气孔、灯龛等附属设施。\n"
            },{
                "img":"./img/scenery/ccybd/4.jpg",
                "text":"在古地道的发掘过程中，出土有汉、唐、宋各代文物，有铁刀、铁剑、弹丸、衔枚、铜镜、铁钉、瓷器、围棋子、钱币等，对研究我国古代军事建筑、军事战术以及曹操军事思想均有重要价值。"
            }]
        }
    },{
        "section":{
            "id":2,
            "name":"花戏楼",
            "content":[{
                "img":"./img/scenery/hxl/1.jpg",
                "text":" 花戏楼景区位于亳州北关花戏楼街北段路东，是以大关帝庙为主，由张飞庙、岳飞庙、朱公书院、火神庙和粮坊会馆等组成的一个古建筑群，因其精湛的雕刻、绚丽的彩绘而驰名中外，1988年被国务院公布为全国重点文物保护单位。"
            },{
                "img":"./img/scenery/hxl/2.jpg",
                "text":" 花戏楼，又称山陕会馆，大关帝庙。是明清时期山西、陕西商人联络聚会的场所。花戏楼景区有 \"三绝\"，正门前两根铁旗杆，高16余米，重两万四千斤，直插云霄，旗杆上还有三层方斗风铃24只，因其构思巧妙、铸造精细被称为花戏楼的第一绝."
            },{
                "img":"./img/scenery/hxl/3.jpg",
                "text":"花戏楼的第二绝在山门，山门是一座仿木结构的三层牌坊式建筑，上面镶嵌着闻名天下的立体水磨砖雕，玲珑剔透，琳琅满目，在不足5厘米厚的水磨青砖面上，共雕人物115人，禽鸟33只，走兽67只，楼台殿阁多处，花草树木无数，内容涉及到中国的宗教、历史、政治、军事、风俗民情等诸多方面；"
            },{
                "img":"./img/scenery/hxl/4.jpg",
                "text":"与山门紧紧相连的戏台上镶满大杨木透雕，并饰以五颜六色的彩绘，艳丽夺目，后人遂以花戏楼称之，舞台上雕刻有十八出三国戏文，里里外外有六百多个人物，因其精湛的雕工和绚丽的彩绘被誉为花戏楼第三绝。"}]
        }
    },{
        "section":{
            "id":3,
            "name":"华祖痷",
            "content":[{
                "img":"./img/scenery/hza/1.jpg",
                "text":"   华祖庵，又称华佗纪念馆，坐落于安徽省亳州市，位于亳州市区新华路永安街中段，是祭祀我国东汉时期杰出的医药学家华佗的场所。景区由华佗庙祠、华佗故居、古药园和华佗中医药文化博物馆四部分组成，总占地面积1.3万平方米。现为安徽省重点文物保护单位、国家AAA级旅游景区和全国中医药文化宣传教育基地。"
            },{
                "img":"./img/scenery/hza/2.jpg",
                "text":"华佗庙祠部分始建于唐宋年间，清乾隆辛已年、嘉庆二年、同治年间多次修缮。庙祠大殿内雕塑有华佗全身像，高2.7米，为雕塑大师钱绍武先生作品。东配殿陈列内容为华佗生平，有竹简式《三国志·方技传·华佗》全文展示以及华佗与神农氏的渊源、华佗当年行医路线图等内容。西配殿主要展示了华佗行医小故事和华佗编创五禽戏、研制麻沸散的故事。"
            },{
                "img":"./img/scenery/hza/3.jpg",
                "text":"穿过庙祠，就是华佗故居部分。该部分由元化草堂、存珍斋和益寿轩组成。元化草堂是华佗起居室，也是他研读经史、医药典籍的地方。草堂内塑有华佗著书铜像，两侧陈列有华佗日常生活的用具和他学习的书籍、竹简等物品。存珍斋是华佗存放中药、炮制、研制中药的地方，陈列主题是鼎炉飘香。华佗长年跋山涉水、采药寻方，尝百草以烧练丸、散、膏、丹和其它合剂。"
            },{
                "img":"./img/scenery/hza/4.jpg",
                "text":"\n" +
                    "      《三国志》说华佗精于方药，他疗疾合汤，不过数种，心解分剂、不复称量，煮熟便可以饮用，药到病除。表明华佗对药草的性能掌握的熟练程度已达到炉火纯青之境界。益寿轩是华佗为病人诊治的场所，陈列主题是寿域宏开。展示了华佗对内、外、妇、儿各科和临床急难杂症都可以辩症施治的精湛医术。"
            }]
        }
    },{
        "section":{
            "id":4,
            "name":"林拥城",
            "content":[{
                "img":"./img/scenery/lyc/1.jpg",
                "text":" 亳州市林拥城位于市区外环线外侧，全长约40.4公里，总规划面积约2万亩，主要包括环城林带、南外环生态观光区（林拥城景区）、西外环现代林业示范区等建设内容。"
            },{
                "img":"./img/scenery/lyc/2.jpg",
                "text":"林拥城呈环状拥抱整个亳州市区，为“林在城中、城在林中、林城辉映”之意。项目的建设认真落实了《亳州市五大发展行动计划》中的绿色发展理念，是营造“地净、路畅、水活、天蓝、林拥城”的美丽画卷的重要组成部分。"
            },{
                "img":"./img/scenery/lyc/3.jpg",
                "text":"林拥城生态观光区（林拥城景区）规划了自然科普区、主题游乐区、中外园林景观区、综合服务区、军事主题区五大板块。其中自然科普区建设了森林书屋、萌宠乐园、科普栈道、森林课堂等科普教育项目；主题游乐区建设了蜗牛庄园游乐场、水上乐园、森林迷堡游乐园、儿童影视基地、人工湖沙滩等游乐项目；中外园林景观区建设了欧风园、雕塑园等主题景观园区；综合服务区建设了综合游客服务中心、大型停车场等游客服务项目；军事主题区规划了素质拓展基地、马术训练基地等项目。"
            },{
                "img":"./img/scenery/lyc/4.jpg",
                "text":"林拥城的建设为亳州市区增加绿地面积10000余亩，有效改善了城市生态环境；同时利用项目良好的生态环境，举办了户外集体婚礼、夏日戏水节、汽车帐篷音乐节、2017亳州半程马拉松、2017江淮骑行（亳州站）总决赛、2018全国越野摩托车大奖赛、亳州市第三届全国风筝邀请赛、2018亳州国际马拉松赛事、“魅力林拥城，活力金秋”亲子游系列活动等，展示了亳州健康、文明的城市形象，使亳州市拥有全新的健康生态名片。为不断提升景区服务质量，景区新增观光自行车、观光小火车等交通设施，配备了休闲长椅及垃圾桶等设施。自2017年3月底开营以来，林拥城景区已接待游客超过200万人次。"}]
        }
    },{
        "section":{
            "id":5,
            "name":"花海大世界",
            "content":[{
                "img":"./img/scenery/hh/1.jpg",
                "text":"亳药花海休闲观光大世界是以亳州特色中医药种植为基础，以花海特色休闲游为主线、以历史文化为点睛、以亳芍为主打，集养生花海和农家体验于一体的健康旅游示范基地，目标打造成为宜居、宜游、宜产，看得到乡土、感受得到乡情的特色乡村。"
            },{
                "img":"./img/scenery/hh/2.jpg",
                "text":" 项目分布在十八里镇和十河镇，总投资40亿元，内含耕地10余万亩。通过政府补贴，引导种植形成特色药材花海景观，重点打造四季药材花卉景区百花园；通过招商引资，布局生态休憩、中医药养生、休闲旅游等项目；通过村级土地利用规划，为旅游项目提供用地空间。项目内18个村的村土地利用规划已获省厅批复，成为省内第一个村级土地利用规划试点。"
            },{
                "img":"./img/scenery/hh/3.jpg",
                "text":"项目建设分为三期，其中一期建设道路、水系、景观绿化、游客服务中心；二期建设百花园核心景区、特色药材花卉引导种植及沿线景观；三期建设美丽乡村、特色民俗村、景观提升及多个精品区等。\n" +
                    "       一期工程已于4月20日全部完工。夏秋季节，项目区内共完成土地流转近10万亩，规模化药花种植工作同步进行。项目的总体规划方案正在由中国建筑西北设计研究院负责进行深化。\n" +
                    "       2016年芍花节期间，大周村及十八里镇共接待游客6-7万人次，单日最高峰值2万人次。2017年芍花节期间，总接待游客18万人次，单日最高峰值3万人次。按照规划，到2020年，待景区基础设施和服务设施的不断完善。项目年接待游客量可达到600万人次左右，年旅游收入可达到12到18亿元。"
            },{
                "img":"./img/scenery/hh/4.jpg",
                "text":"  目前，项目二期建设方案已经完成，包含核心景区百花园项目、亳州西（十八里）游客服务中心以及基础设施提升等工程。即将进入二期建设的施工阶段。项目二期将按照5A级景区的标准，在河道沿线设立微地形、设置游览绿道，将水系打造成景观休闲带；全力展开亳药花海的招商工作，布局更多的旅游项目；对花海的村庄、主干道沿线建筑进行特色化改造，并充分利用改造过的民居、民房，与艺术家、设计工作室合作，联袂打造画家村、剪纸村等特色村，打造“一村一品”的特色旅游商品。\n" +
                    "       未来，我们会在药草花田之中建起“花间堂”乡村田园设施，创造如诗如画的居住体验环境；建设国际水准、精致的旅游风情小镇，带动中医药产业提升，三产融合，拉动经济发展。"}]
        }
    },{
        "section":{
            "id":6,
            "name":"魏武祠",
            "content":[{
                "img":"./img/scenery/wwc/1.jpg",
                "text":" 魏武祠位于曹操公园内，是以三国时期伟大的政治家、军事家、文学家曹操为主题，以其纵横捭阖、极富传奇的一生为主线，着力展现三国历史文化的专题性纪念场所。"
            },{
                "img":"./img/scenery/wwc/2.jpg",
                "text":"  曹操（公元155－220年）字孟德，小名阿瞒，又名吉利，沛国谯县（今安徽亳州市）人，三国时著名的政治家、军事家、文学家，其子曹丕称帝后，被追尊为武帝。东汉末年，曹操在北方屯田，兴农田水利，解决了军粮缺乏的问题，对农业生产的恢复起到了非常重要的作用；善唯才适用，广泛招纳身处乱世的中下层人士，并抑制豪强，加强集权，所辖地区社会经济得到恢复和发展；精兵法韬略，著《孙子略解》、《兵书接要》等书；善诗歌文辞，写下了著名的《蒿里行》、《观沧海》等篇，抒发自己的政治抱负，并反映汉末人民的苦难生活，气魄雄伟，慷慨悲凉，散文亦清峻整洁，著作有《魏武帝集》，已佚。"
            },{
                "img":"./img/scenery/wwc/3.jpg",
                "text":"曹操纪念馆从政治、军事、文学等不同方面，为世人还原了一段真实、完整的三国历史，向人们讲述了一个永远也讲不完的曹操故事。"
            },{
                "img":"./img/scenery/wwc/4.jpg",
                "text":"纪念馆整体为一组三进式仿汉风格的建筑群，目前陈列内容有曹操生平简介、魏武祠、三曹诗碑长廊等，于2009年建成，总建筑面积2200平方米。"}]
        }
    }]
}

景区的内容信息和对应图片的存储位置。

let i = 0
let navIndex                        //记录当前轮播图序号
let positionId                      //景点序号

//添加事件
function addEvent(data){
    data = data
    //点击景区模块会查看详情介绍
    $(".sectionBox").click(function (){
        let index = $(this).prop("id")-1                            //获取对应景区id
        let introduceBox = "<div class=\"introduceBox\"></div>"     //内容盒子
        let name = "<div class=\"name center\"></div>"              //文章标题
        let img = "<div class=\"img\"></div>"                       //景区图片
        let words = "<div class=\"words\"></div>"                   //介绍文字
        let wordBox = "<div class=\"wordBox\"></div>"               //段落盒子

        $(".headerName").remove()
        $('body,html').animate({scrollTop: 0},500); //返回顶部
        $(".headerBox").css("justify-content","space-between")
        $(".mainBox").children(".navBox,.ListBox").toggle("fast")   //隐藏景区模块
        $(".searchBox").toggle("fast")                              //隐藏搜索框
        //$(".headerName").toggle("fast")                           //隐藏提示文字
        $(".back").toggle("fast")                                   //显示返回

        $(".footerBox").append(name).append(introduceBox)           //加载标题
            .find(".center").text(data.mode[index].section.name)
        $(".center").css("text-align","center").css("margin-top","10px")

        for(let i=0;i<data.mode[index].section.content.length;i++){ //加载段落内容
            $(".introduceBox").append(wordBox)
                .find(".wordBox:last-child").append(words).append(img).css("padding","10px")
                .find(".words").text(data.mode[index].section.content[i].text)
                .parents(".wordBox").find(".img")
                .css("background","url("+data.mode[index].section.content[i].img+")").css("background-size","cover")
        }

        //返回主页面
        $(".back").click(function (){
            $(".center").remove()
            $(".introduceBox").remove()

            $(".mainBox").children(".navBox,.ListBox").fadeIn("fast")           //显示景区模块
            $(".searchBox").fadeIn("fast")                                      //显示搜索框
            //$(".headerName").toggle("fast")                                   //显示提示文字
            $(".back").fadeOut("fast")                                          //隐藏返回文字

            $(".sectionBox").css("background","#fff")                           //返回后背景颜色复原
        })
        return false
    })

    $(".searchBox .input").click(function (){                                   //点击搜索框出现景点列表
        $(".headerName").remove()                                               //移除提示文字
        $(".searchList").toggle("fast")                                         //出现景点列表

        $(".headerBox").css("justify-content","flex-end")
            .find(".searchBox").css("width","100%")
            .find(".input").css("width","100%")
            .next(".btn").css("left","60%").css("margin-left"," calc(43% - 55px)")
        return false
    })

    $(document).on('click',':not(.searchBox .input,.searchList)',function(){        //点击其他区域隐藏
        //$(".ulCtnJs").hide(300);
        $(".searchList").fadeOut("fast")
        return;
    });

    $(".list").click(function (){                                                           //选择某一个景点，它的景区名称会出现在搜索框
        positionId = $(this).attr("positionId")
        $(".searchBox .input").text($(this).text()).css({
            lineHeight:0.8,
            fontSize:12
        })

        $(".searchList").toggle("fast")                                                    //列表消失
    })

    $(".headerBox .searchBox .btn").click(function () {                                    //点击搜索按钮后，跳转至对应模块
        move($("#"+positionId))
    })

    $(".navImg").click(function (){                                                        //点击轮播图后，会跳转对应位置
        navIndex = $(this).attr("index")
        move( $("#"+navIndex))
    })
    function move($position){
        var t = $position.offset().top;                                                    //  获取需要跳转到标签的top值
        $("html,body").animate({ scrollTop: t}, 500);                      // 动态跳转到指定位置（数值越大滚动速度越慢）
        $(".sectionBox").css("background-color","#fff")                                    //还原所有背景
        $($position).css("background-color","#ccc")                                        //对应的景区背景颜色改变
    }

    window.setInterval(function (){                                                 //配置轮播图
        $(".navImg").css("background","url("+data.mode[i].section.content[3].img+")"+"0%" + "40%")
            .css("background-size","100%")
            .attr("index",data.mode[i].section.id)
        i = i==data.mode.length-1?0:i
        $(".pictureName").text(data.mode[i].section.name)
        i++
    },2000)
}

添加各种点击触发事件。

.bgi{width: 100%;height: 100%;background-image: url(../img/bg.jpg);background-size: 100%;}
.headerBox{height: 35px;margin: 0 auto;border-bottom: 1px solid #ccc;}
.headerName,.back{padding-left: 10px;font-weight: bold;}
.back{display: none;}
.navBox{width: 100%;height: 140px;position: relative;}
.img{position: relative;width: 100%;height: 100%;background-size: cover;}
.navImg,p1,p2{background: url(../img/nav.jpg)  60% no-repeat;}
.sectionBox{height: 105px;padding: 10px;transition: .2s linear;display: flex;border-bottom: 1px solid #ccc;position: relative;z-index: 1;}
.sectionBox:hover{background-color: #eeeeee;}
.leftBox{width: 200px;padding: 5px;}
.rightBox{width: 350px;}
.img{width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;}
.name{color: #333;font-size: 20px;font-weight: bold;}
.text{font-size: 12px;line-height: 20px;word-break:break-all;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.searchBox{margin-left: 10px;margin-right: 10px;padding-top: 7px;display: flex;}
.btn{font-size: 12px;padding-left: 1px;line-height: 21px;position: absolute;margin-left: 85px;border-left: 1px solid #ccc;}
.input{width: 100px;height: 10px;line-height: 0.8;border-radius: 10px;}
.headerBox{display: flex;justify-content: space-between;flex-wrap:wrap;}
.articleBox .name{}
.introduceBox .img{width: 300px;height: 200px;margin: 0 auto;background-image: url(../img/scenery/hxl/1.jpg);}
.words{text-indent:2em}
.articleBox{padding: 10px;}
.center{text-align: center;}
.searchList{width: 93%;margin: 28px 10px 0px 0px;position: absolute;background-color: #fff;border: 1px solid #ccc;display: none;border-radius: 17px;z-index: 9999;}
.list{border-bottom: 1px solid #ccc;padding-left: 10px;line-height: 23px;z-index: 999;}
.list:hover{background-color: #ccc;}
.pictureName{color: #fff;position: absolute;left: 40%;z-index: 999;line-height: 20px;}
.shadow{width: 100%;height: 21px;background: rgba(0, 0, 0, 0.25);position: absolute;z-index: 999;}

页面具体样式。

相关代码在我博客下的资源里面，欢迎各位下载查看。
代码地址：https://download.csdn.net/download/weixin_45924250/15501648