显示与隐藏效果

谁借莪1个温暖的怀抱¢ 2022-03-18 11:17 351阅读 0赞

显示与隐藏效果

  1. 开发工具与关键技术:DW、显示与隐藏效果
  2. 作者:黄桂康
  3. 撰写时间:2019.02.20

本篇介绍下拉框的效果,它只要是两个盒子,一个盒子显示在网页上,一个隐藏着,当鼠标点击显示的那个盒子,隐藏着的盒子就显示。
首先创建两的div,给它们id,然后页面刷新,,,
在这里插入图片描述
在这里插入图片描述
出现两个div效果,出现后就隐藏一个div,display:none;(“none”为隐藏,“block”为显示)。
在这里插入图片描述
在这里插入图片描述
下面的盒子隐藏掉了,然后就开始写js部分,在HTML中嵌入JavaScript代码,可以在body标签里面写,就是script标签,script标签要有开始标签和结束标签。
在这里插入图片描述
Script标签里面,首先声明变量,两个变量X和Y,然后就可以在下面写要执行的效果的动作,如下截图:onclick为鼠标单击,ondblclck为鼠标双击,block为显示,none为隐藏。
设计的代码的意思就是当鼠标单击X盒子的时候,Y盒子显示,当鼠标双击X盒子的时候,Y盒子隐藏。
在这里插入图片描述
显示效果如下截图:
在这里插入图片描述
隐藏效果如下截图:
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,351人围观)

还没有评论,来说两句吧...

相关阅读