SVG模拟下拉选框功能
程序员文章站
2022-05-27 08:32:07
...
由于svg标签内不支持html原生select标签。所以想要用下拉选框功能需要自己模拟。
效果图如下:
要求:
- 点击下拉选框,显示可选菜单
- 鼠标在可在选菜单滑动,展示不同选项。
- 点击可选菜单,改变下拉选框的内容,同时关闭可选菜单
技术
- 新建clipPath遮罩层,可选菜单引用遮罩层,仅展示4条可选项
- 滑动滚轮触发mousewheel事件,每次增加/减少一个可选框的高度,当大于等于0或小于等于所有选框减去展示框(4个)时停止
- 点击选项框做可选菜单的show() / hide() 切换
- 用的是D3.JS。将所有svg标签append进页面
- 代码上传到了github
展示链接
[SVG/SELECT](https://yanhappiness.github.io/Notes/svgselect/svgselect.html)
代码地址
[Github](https://github.com/YANhappiness/Notes/tree/master/svgselect)
上一篇: SVG 详解(二)基本概念