用css创建一个图像

Question

我正在尝试在css中做下一件事:

当用户用鼠标覆盖所有图像时,

css将改为:

在图像编号2和3中,我必须让他按下小圆圈.我启用了它.

我没有成功从小圆圈开始蓝线(如图1所示):

这条蓝线可以通过给定的输入向左或向右移动(100将为所有正确的灰色形状着色.-100将为所有左灰色形状着色.在此示例中,我假设用户插入参数:25.然后右灰色的四分之一被着色了)

请有人帮帮我吗？

蓝线在课堂上PersonaCanvasMini,它就像PersonaCanvas

任何帮助赞赏!

这是我的jsfiddle:

http://jsfiddle.net/kyfha/74/

这是我的HTML:

<div id="goalDetails" onmouseOver="addDetails();" onmouseout="removeDetails();">

    <div class="PersonaCanvas">
        <div class="smallCircle" onclick="showProjection();"></div>
        <div id="smallestCircle" style="display: none" onclick="showBurnRate();"></div>
    </div>

    <div id="details" style="display: none">
        <div id="dolarsDetails">77$</div>
        <div id="projOrBurn">Projection</div>
    </div>

    <div id="mainShape" class="bigCircle">
        <div id="cpaDetails">7.03</div>
    </div>

    <div class="PersonaCanvasMini"></div>
    <div id="mainLine" style="display:none"></div>
    <div id="secondaryLine" style="display:none"></div>
</div>

我的CSS在jsfiddle.

Answer 1

Alon，您想要实现的目标可以使用 jQuery + CSS 来完成，或者最好尝试使用 Kineticjs javascript 库来处理 HTML 画布。如果您需要将实时数据绑定到图形，那么您可能应该将 Angularjs 与 Kineticjs 或 jQuery 结合使用（如果您无法避免）。

注意.. Kineticjs 非常容易学习和使用，我建议您从以下开始： http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/