2017-01-21 17:58发布
要用前端代码写这样的一个图形；需要达到的交互效果是：
当鼠标移动到里面某个区域时，该扇形区域变成灰色块
并且对应的外圈，边框变成红色
给你个提示：用border-radius做
这四个 盒子 做为 父级盒子， 注意overflow : hidden ， 每一个盒子 内 有 两个 用border-radius 处理的 1 / 4 圆
用角度和距离圆心距离确定鼠标位置，就是那个灰色的块用canvas画出来。
将 1/ 4 旋转一下，每个1/4圆 都被 方形 父盒子 遮住一半。
单纯的DOM非常麻烦，你应该用SVG或者canvas
想到一种 思路 四个 方块 盒子 ，
就可以实现了 ，
坐等楼主写完。。想过几个方案，感觉都太麻烦，，，，
另外如果感觉 麻烦 的话， 就用CANVAS 慢慢画吧
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://wenda.whatsns.com/data/attach/logo/logo.png', '推荐 李小杨kame启耀 的问题《前端代码如何写出带交互效果的八卦图？》','https://wenda.whatsns.com/q-310734.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
付费偷看金额在0.1-10元之间
给你个提示：用border-radius做
这四个 盒子 做为 父级盒子， 注意overflow : hidden ， 每一个盒子 内 有 两个 用border-radius 处理的 1 / 4 圆
用角度和距离圆心距离确定鼠标位置，就是那个灰色的块用canvas画出来。
将 1/ 4 旋转一下，每个1/4圆 都被 方形 父盒子 遮住一半。
单纯的DOM非常麻烦，你应该用SVG或者canvas
想到一种 思路 四个 方块 盒子 ，
就可以实现了 ，
坐等楼主写完。。
想过几个方案，感觉都太麻烦，，，，
另外如果感觉 麻烦 的话， 就用CANVAS 慢慢画吧
一周热门 更多>