js编写城市选项切换效果

JavaScript010

js编写城市选项切换效果,第1张

好。

1、效果方面:js编写城市选项切换效果一款JS版网页顶部向下滑出的城市切换导航,仿sohu团购网页顶部的城市导航切换,从顶部向下滑出,效果非常好。

2、范围方面:js编写可以随时查看,应用范围广,方便在其他城市之间切换。

切换卡原理 :

切换按钮 =>内容容器 =>时间定时器(自动切换) =>鼠标经过事件 or 点击事件

html:需要按钮数个,内容容器数个(层,叠在一起的。也可以用js添加节点来实现)。

首先加载完所有内容容器,只显示一个 ,其它的属性都改为display:none。显示的是display:block。。。

然后再根据鼠标事件来触发隐藏或者显示容器 。

如果需要定时切换 ,那么 把内容容器的 Index 作为数组来循环遍历。 每隔n秒用 时间函数来触发index 的自增行为。