耀炎食品-1.index

创建index.heml

----------------------------------------------------------------------

在body中，分块

一整个顶部，命名为top

<div id="top">
    <input type="button" id="inp1" value="首页" name="首页" onclick="goPage(this)" />
    <input type="button" id="inp2" value="品牌与产品" name="品牌与产品" onclick="goPage(this)" />
    <input type="button" id="inp3" value="联营合作" name="联营合作" onclick="goPage(this)" />
    <input type="button" id="inp4" value="配套服务" name="配套服务" onclick="goPage(this)" />
    <input type="button" id="inp5" value="门店信息" name="门店信息" onclick="goPage(this)" />
    <input type="button" id="inp6" value="关于我们" onmouseover="mouseover()" onmouseleave="mouseleave()" />
</div>

--------------------------------------------------------------------------

实现下拉功能

所以，再写一个index_aboutAs

<div id="index_aboutAs">
<!--    mouseover 鼠标
        mouseover与mouseenter mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
        mouseleave. 指点设备（通常是鼠标）的指针移出某个元素时，会触发 mouseleave 事件
-->
    <input type="button" id="inp7" value="企业" name="关于我们" onclick="goPage(this)" onmouseover="mouseover()" onmouseleave="mouseleave()" />
    <input type="button" id="inp8" value="加入我们" name="联营合作" onclick="goPage(this)" onmouseover="mouseover()" onmouseleave="mouseleave()" />
</div>

 

 ----------------------------------------------------------------------------------------------

    function mouseover() {
        const aboutAs = document.getElementById('index_aboutAs');
        aboutAs.style.display = 'block';
    }
    function mouseleave() {
        const aboutAs = document.getElementById('index_aboutAs');
        aboutAs.style.display = 'none';
    }

<!--    mouseover 鼠标
        mouseover与mouseenter mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
        mouseleave. 指点设备（通常是鼠标）的指针移出某个元素时，会触发 mouseleave 事件
-->

 移上去就会触发，移开就什么也不会发生，如果点击，也会调用goPage函数

----------------------------------------------------------------------------------------------

goPage（）函数

function goPage(obj) {
        let height;
        //如果点击的是本身，则白底，棕色字
        if (obj.name == preObj.name) {
            obj.style.color = '#65360a';
            obj.style.background = 'white';
        }
        //如果点击的不是本身，本身变为棕色底，白字
        else {
            preObj.style.color = 'white';
            preObj.style.background = '#65360a';
            obj.style.color = '#65360a';
            obj.style.background = 'white';
            preObj = obj;
        }

//如果点击的是本身，则白底，棕色字

//如果点击的不是本身，本身变为棕色底，白字

-----------------------------------------------------------------------------------------------

实现点击图片换图功能

所以再写一个对于图片的引用

<div align="center" style="margin-top: -2px;">
    <img id="img1" src="imgs/无与伦比的美味.png" width="1300px" height="600px" onclick="changeMap(this)" />
    <img id="img2" src="imgs/无与伦比的美味2.png" width="1300px" height="600px" style="display: none" onclick="changeMap(this)" />
    <img id="img3" src="imgs/无与伦比的美味3.png" width="1300px" height="600px" style="display: none" onclick="changeMap(this)" />
    <img id="img4" src="imgs/无与伦比的美味4.png" width="1300px" height="600px" style="display: none" onclick="changeMap(this)" />
</div>

 -----------------------------------------------------------------------------------------

changeMap（）函数

function changeMap(obj) {
            const imgId = obj.id;
            obj.style.display = 'none';
            if (imgId == 'img1') {
                document.getElementById('img2').style.display = 'block';
            }
            if (imgId == 'img2') {
                document.getElementById('img3').style.display = 'block';
            }
            if (imgId == 'img3') {
                document.getElementById('img4').style.display = 'block';
            }
            if (imgId == 'img4') {
                document.getElementById('img1').style.display = 'block';
            }
        }

--------------------------------------------------------------------------------------------

最后写一个botton图片的引用，构建出完整的六个网页不变部分

--------------------------------------------------------------------------------------------

此时，除了top栏，都是首页.html的内容，所以可以更换别的页面，只需要更改链接

<div align="center" style="margin-top: -4px">
<!--    iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面
，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。-->
    <iframe id="ifr" src="html/首页.html" width="1300px" scrolling="no" style="height: 800px; border: none;" marginwidth="0px" marginheight="0px"></iframe>
<!--此时，除了top，bottom栏，都是首页.html的内容，所以可以更换别的页面，只需要更改链接-->
</div>

<!--    iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面
，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。-->

-------------------------------------------------------------------------------------------------

跟随动作，更换网页内容

//iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，
// 例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。

function goPage(obj) {
        let height;
        //如果点击的是本身，则白底，棕色字
        if (obj.name == preObj.name) {
            obj.style.color = '#65360a';
            obj.style.background = 'white';
        }
        //如果点击的不是本身，本身变为棕色底，白字
        else {
            preObj.style.color = 'white';
            preObj.style.background = '#65360a';
            obj.style.color = '#65360a';
            obj.style.background = 'white';
            preObj = obj;
        }
        const page = obj.name;
        //这里在拼接url的链接
        const url = 'html/' + page + '.html';
        //更改链接，达到转换页面内容的目的
        const ifr = document.getElementById('ifr');
        //在这里本来写的是==，它提示可能因为意外类型导致，我更正==为===，避免意外类型
        if (page === '首页'){
            height = 首页;
        }
        if (page === '品牌与产品'){
            height = 品牌与产品;
        }
        if (page === '联营合作'){
            height = 联营合作;
        }
        if (page === '配套服务'){
            height = 配套服务;
        }
        if (page === '门店信息'){
            height = 门店信息;
        }
        if (page === '关于我们'){
            height = 关于我们;
        }
        //iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，
        // 例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。
        ifr.style.height = height.toString() + 'px';
        ifr.src = url;
    }

起主要作用的是

const url = 'html/' + page + '.html';
//更改链接，达到转换页面内容的目的
ifr.src = url;