欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SVG模拟下拉选框功能

程序员文章站 2022-05-27 08:32:07
...

由于svg标签内不支持html原生select标签。所以想要用下拉选框功能需要自己模拟。

效果图如下:
SVG模拟下拉选框功能

要求:

  1. 点击下拉选框,显示可选菜单
  2. 鼠标在可在选菜单滑动,展示不同选项。
  3. 点击可选菜单,改变下拉选框的内容,同时关闭可选菜单

技术

  1. 新建clipPath遮罩层,可选菜单引用遮罩层,仅展示4条可选项
  2. 滑动滚轮触发mousewheel事件,每次增加/减少一个可选框的高度,当大于等于0或小于等于所有选框减去展示框(4个)时停止
  3. 点击选项框做可选菜单的show() / hide() 切换
  4. 用的是D3.JS。将所有svg标签append进页面
  5. 代码上传到了github

展示链接

[SVG/SELECT](https://yanhappiness.github.io/Notes/svgselect/svgselect.html)

代码地址

[Github](https://github.com/YANhappiness/Notes/tree/master/svgselect)
相关标签: SVG