JavaScript 小工具

正反选

   使用Js完成正反选的效果。

   JavaScript 小工具_第1张图片





        
        
        Document
        



        

爱好
篮球
足球
排球

二级联动

   使用Js完成二级联动

   当标签中某一个被选中时,可以对该

模态对话框

   在有的场景中,当点击登录或者注册的按钮后整个页面会弹出登录和注册的一个窗口。其他部分均变为灰色,我们可以利用calss的增删改查来实现这一需求和功能。

   模态对话框一般分为三层

   第一层显示层,显示其他主要的信息,如页面主题等

   第二层遮罩层,当点击某一特定按钮后触发

   第三层功能层,登录或注册功能的功能均在此层

JavaScript 小工具_第3张图片





        
        
        Document
        



        

左侧菜单栏

   左侧三个菜单栏,点击任何一个隐藏另外两个,其实这个小功能用jQuery来做简单的很。使用Js稍稍有点小复杂不过其实还好。

   用Map来做一个容器,让其与对应的菜单标签建立联系。

   当点击一个标题时循环容器,将非事件目标的对应标签设置为隐藏,将事件目标的对应标签设置为显示。

JavaScript 小工具_第4张图片





        
        
        Document
        



        

HTML学习

CSS学习

JavaScript学习

轮播图

   轮播图为常用的工具,这里用原生Js进行实现,并将其作为插件的形式,方便今后使用。

  

   轮播图切换并未加入过渡动画

   传入图片路径自动生成所有组件与样式





        
        
        Document
        









你可能感兴趣的:(JavaScript 小工具)