javascript - 前端代码如何写出带交互效果的八卦图？

问题描述

问 题

要用前端代码写这样的一个图形；
需要达到的交互效果是：

1. 当鼠标移动到里面某个区域时，该扇形区域变成灰色块

2. 并且对应的外圈，边框变成红色

这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党

解决方案

单纯的DOM非常麻烦，你应该用SVG或者canvas

这是SVG的例子

http://jsbin.com/fedehodaku/e...

<svg width="500" height="500" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" style="position: fixed; top: 0px; left: 0px; background-color: white;">
<style>
    path.area {
        fill-opacity: 0;
        fill: #CCCCCC;
    }
    path.area:hover {
        fill-opacity: 1;
    }
</style>
<g stroke="gray" stroke-dasharray="10 10" fill-opacity="0">
    <circle cx="500" cy="500" r="200"></circle>
    <circle cx="500" cy="500" r="300"></circle>
    <circle cx="500" cy="500" r="400"></circle>
    <circle cx="500" cy="500" r="500" stroke="#FF6666"></circle>
</g>
<g stroke="gray">
    <line x1="600" x2="1000" y1="500" y2="500"></line>
    <line x1="570.71" x2="853.55" y1="570.71" y2="853.55"></line>
    <line x1="500" x2="500.00" y1="600" y2="1000"></line>
    <line x1="429.28" x2="146.44" y1="570.71" y2="853.55"></line>
    <line x1="400" x2="0" y1="500" y2="500.00"></line>
    <line x1="429.28" x2="146.44" y1="429.28" y2="146.44"></line>
    <line x1="500" x2="499.99" y1="400" y2="0"></line>
    <line x1="570.71" x2="853.55" y1="429.28" y2="146.44"></line>
</g>
<circle cx="500" cy="500" r="100" fill="#FF6666" stroke-opacity="0"></circle>
<path d="M600 500 A100 100 0 0 1 570.71 570.71 L641.42 641.42 A200 200 0 0 0 700 500 Z" class="area"></path>
<path d="M570.71 570.71 A100 100 0 0 1 500 600 L500 700 A200 200 0 0 0 641.42 641.42 Z" class="area"></path>
<path d="M500 600 A100 100 0 0 1 429.28 570.71 L358.57 641.42 A200 200 0 0 0 500 700 Z" class="area"></path>
<path d="M429.28 570.71 A100 100 0 0 1 400 500 L300 500 A200 200 0 0 0 358.57 641.42 Z" class="area"></path>
<path d="M400 500 A100 100 0 0 1 429.28 429.28 L358.57 358.57 A200 200 0 0 0 300 500 Z" class="area"></path>
<path d="M429.28 429.28 A100 100 0 0 1 500 400 L499.99 300 A200 200 0 0 0 358.57 358.57 Z" class="area"></path>
<path d="M500 400 A100 100 0 0 1 570.71 429.28 L641.42 358.57 A200 200 0 0 0 499.99 300 Z" class="area"></path>
<path d="M570.71 429.28 A100 100 0 0 1 600 500 L700 499.99 A200 200 0 0 0 641.42 358.57 Z" class="area"></path>
<path d="M700 500 A200 200 0 0 1 641.42 641.42 L712.13 712.13 A300 300 0 0 0 800 500 Z" class="area"></path>
<path d="M641.42 641.42 A200 200 0 0 1 500 700 L500 800 A300 300 0 0 0 712.13 712.13 Z" class="area"></path>
<path d="M500 700 A200 200 0 0 1 358.57 641.42 L287.86 712.13 A300 300 0 0 0 500 800 Z" class="area"></path>
<path d="M358.57 641.42 A200 200 0 0 1 300 500 L200 500.00 A300 300 0 0 0 287.86 712.13 Z" class="area"></path>
<path d="M300 500 A200 200 0 0 1 358.57 358.57 L287.86 287.86 A300 300 0 0 0 200 500.00 Z" class="area"></path>
<path d="M358.57 358.57 A200 200 0 0 1 499.99 300 L499.99 200 A300 300 0 0 0 287.86 287.86 Z" class="area"></path>
<path d="M499.99 300 A200 200 0 0 1 641.42 358.57 L712.13 287.86 A300 300 0 0 0 499.99 200 Z" class="area"></path>
<path d="M641.42 358.57 A200 200 0 0 1 700 499.99 L800 499.99 A300 300 0 0 0 712.13 287.86 Z" class="area"></path>
<path d="M800 500 A300 300 0 0 1 712.13 712.13 L782.84 782.84 A400 400 0 0 0 900 500 Z" class="area"></path>
<path d="M712.13 712.13 A300 300 0 0 1 500 800 L500 900 A400 400 0 0 0 782.84 782.84 Z" class="area"></path>
<path d="M500 800 A300 300 0 0 1 287.86 712.13 L217.15 782.84 A400 400 0 0 0 500 900 Z" class="area"></path>
<path d="M287.86 712.13 A300 300 0 0 1 200 500.00 L100 500.00 A400 400 0 0 0 217.15 782.84 Z" class="area"></path>
<path d="M200 500.00 A300 300 0 0 1 287.86 287.86 L217.15 217.15 A400 400 0 0 0 100 500.00 Z" class="area"></path>
<path d="M287.86 287.86 A300 300 0 0 1 499.99 200 L499.99 100 A400 400 0 0 0 217.15 217.15 Z" class="area"></path>
<path d="M499.99 200 A300 300 0 0 1 712.13 287.86 L782.84 217.15 A400 400 0 0 0 499.99 100 Z" class="area"></path>
<path d="M712.13 287.86 A300 300 0 0 1 800 499.99 L900 499.99 A400 400 0 0 0 782.84 217.15 Z" class="area"></path>
<path d="M900 500 A400 400 0 0 1 782.84 782.84 L853.55 853.55 A500 500 0 0 0 1000 500 Z" class="area"></path>
<path d="M782.84 782.84 A400 400 0 0 1 500 900 L500.00 1000 A500 500 0 0 0 853.55 853.55 Z" class="area"></path>
<path d="M500 900 A400 400 0 0 1 217.15 782.84 L146.44 853.55 A500 500 0 0 0 500.00 1000 Z" class="area"></path>
<path d="M217.15 782.84 A400 400 0 0 1 100 500.00 L0 500.00 A500 500 0 0 0 146.44 853.55 Z" class="area"></path>
<path d="M100 500.00 A400 400 0 0 1 217.15 217.15 L146.44 146.44 A500 500 0 0 0 0 500.00 Z" class="area"></path>
<path d="M217.15 217.15 A400 400 0 0 1 499.99 100 L499.99 0 A500 500 0 0 0 146.44 146.44 Z" class="area"></path>
<path d="M499.99 100 A400 400 0 0 1 782.84 217.15 L853.55 146.44 A500 500 0 0 0 499.99 0 Z" class="area"></path>
<path d="M782.84 217.15 A400 400 0 0 1 900 499.99 L1000 499.99 A500 500 0 0 0 853.55 146.44 Z" class="area"></path>
</svg>

这篇关于javascript - 前端代码如何写出带交互效果的八卦图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！