耀炎食品-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;
耀炎食品-1.index相关推荐
- HTML综合之实现耀炎食品有限公司网页
HTML综合之实现耀炎食品有限公司网页 效果展示 导航栏 首页 品牌与产品 联营合作 配套服务 门店信息 关于我们 框架构思 代码 结语 效果展示 导航栏 鼠标放在上面,会发现相应的变化,点击图片可以 ...
- web作业之期末工程 “耀炎食品网站”
设计思路 不难看出,此次期末工程,我们要具体分为六个网页进行完成 而设计思路为: 1.设计一个总网页,六个分网页,最后进行调用达到最终效果 2.此次将实行css js html的分离 3建立一个图片目 ...
- 银屑病与肠道菌群(调研手稿二)
google搜索gut bacteria psoriasis ##################################################################### ...
- 银屑病推荐益生菌摄入(持续更新中)
银屑病整体原理 (插图来自<治愈银屑病-自然疗法>) 肠毒->肝->血->皮肤 肝脏是阻止LPS从肠道进入的第一道屏障,肝功能障碍导致血LPS水平升高 肝脏是清除LPS的 ...
- 用vue3+vant4开发的简单小众电商购物项目模板(纯前端)
简单录制如下 主要练习下界面和交互,顺带简单了解下 vue3 语法. 简单截图如下 首页 首页-猜你喜欢 分类 购物车 个人页面 部分文件代码 底部导航文件 <template><d ...
- sqlser 2005 使用执行计划来优化你的sql (实用、赞)
原文出处:https://www.cnblogs.com/cq-jiang/p/7711680.html (建议阅读原文) 一:sqlserver 执行计划介绍 sqlserver 执行计是在s ...
- 想通过互联网创业,如何找到商机项目创业呢
很多人都像在互联网上创业,但是互联网创业看着简单,其实挺考验一个人的眼力和思维能力,最重要是经验,今天不说什么理论方面的,只说一个简单牛逼的方法 首先你创业目的是为了什么? 拯救世界?做爱与正义的使者 ...
- 端粒效应《The Telemere Effect》程序员的养生指南(三)身心与生活
身为程序员,面临着久坐,工作时间长,工作量大等种种问题.健康显得至关重要.接下来,打算借助一本诺奖得主写的书,来探讨下怎么能够更加健康的做好程序员的工作.端粒效应<The Telomere Ef ...
- 如何通过网络创业赚钱?一份入门互联网项目营销的干货指南
文章有点长,全文9000多字,一份入门互联网项目营销的干货指南,从思维.打造营销体系,到引流的干货笔记 一.什么是互联网行业 二.人与人之间思维不同,结果不同 三:项目赚钱的"模式" ...
最新文章
- linux oracle 关闭防火墙,Linux 下关闭防火墙设置
- 「AI白身境」搞计算机视觉必备的OpenCV入门基础
- Xamarin Visual Studio不识别JDK路径
- Linux二十年产权官司告终:IBM赔偿近亿元,期间“熬死”一位起诉方
- AppLaunchScreen/Screenshot(启动图/屏幕快照)输出规范
- 读书笔记之如何阅读一本书
- (60)逆向分析 KiSwapThread —— 找就绪线程和空闲线程
- kafka mirror_SSL Kafka经纪人从Kafka Mirror Maker迁移到Brooklin的挑战
- android有关医疗实现功能,基于Android的智能医疗监测系统的设计与实现_问答库
- python爬取NBA湖人队球星的数据,并且用Excel保存
- 图像的平滑与锐化代码matlab_【图像处理】轻松搞懂图像锐化
- 运维真的被云革命掉了吗?
- 在Maple 9中察看内置函数的原代码的三种方法
- 你不知道的华为交换机22个实用技巧
- 处理分类数据 非数值型编码
- Android开发,app多种语言包
- 中国过氧化二异丙苯市场投资状况分析与前景趋势研究报告2022年版
- #java读书笔记#基础知识
- 魔兽正式服5区服务器互通信息,《魔兽世界》一区合并服务器正式通告
- EDA -- 灯开关设计