Question

我有一个圆圈形状的图像。

将圆圈分成3个相等的部分。

我有整个圈子的图像。

我有3张其他图片，每张图片只有一块圆圈，但颜色为绿色。

我必须做以下事情：

显示原始圆圈图像。
屏幕上有3个按钮，每个按钮链接到圆圈的3个部分。单击时，它会将绿色图像覆盖在圆上。因此，如果您单击所有3个按钮，则整个圆圈将为绿色。如果您只点击了第一个按钮，则只有该圆圈的那一部分为绿色。

我该如何实现？是否可以一次叠加2张图像？我必须在这里玩x和y定位吗？（当前绿色图像部分，如果将它们放在原始图像上，将与原始圆形图像完全一致。

Answer 1

这是一个直接JavaScript和jQuery的解决方案直接的JavaScript使用按钮的DOM0 onclick处理程序，这是正常的，因为它们只触发一个事件。窗口的onload处理程序更是一个问题：每个文档只能有一个正如您所见，jQuery解决方案要短得多，但您必须包含jQuery库。 $( function(){} )取代了窗口onload处理程序，但你可以拥有任意多个。

图像sector1.gif，sector2.gif和sector3.gif除了对它们可见的圆圈之外是透明的。你也可以使用.png，但是如果没有一些推文就不会在ie6中使用。

<!-- the markup -->
<div id="circle">
    <div id="sector1"></div>
    <div id="sector2"></div>
    <div id="sector3"></div>
</div>
<input type="button" id="button1" value="Sector 1">
<input type="button" id="button2" value="Sector 2">
<input type="button" id="button3" value="Sector 3">

_

/* the style */
#circle{
    width: 100px;
    height 100px;
    position: relative;
    background: url( images/circle.gif );
}

#sector1, #sector1, #sector1 {
    width: 100px;
    height 100px;
    top: 0;
    left: 0;
    position: absolute;
    display: none;
}
#sector1 {
    background: url( images/sector1.gif );
}
#sector2 {
    background: url( images/sector2.gif );
}
#sector2 {
    background: url( images/sector3.gif );
}

_

//basic javascript solution
window.onload = function() {
    // get references to the buttons
    var b1 = document.getElementById( 'button1' );
    var b2 = document.getElementById( 'button2' );
    var b3 = document.getElementById( 'button3' );

    // get references to the sectors
    var s1 = document.getElementById( 'button1' );
    var s2 = document.getElementById( 'button2' );
    var s3 = document.getElementById( 'button3' );

    // add onclick events to the buttons which display the sectors
    b1.onclick = function() { s1.style.display = 'block'; }
    b2.onclick = function() { s2.style.display = 'block'; }
    b3.onclick = function() { s3.style.display = 'block'; }
}


//jQuery solution
$(function() {
    $('#button1').click( function() { $('#sector1').show() } );
    $('#button2').click( function() { $('#sector2').show() } );
    $('#button3').click( function() { $('#sector3').show() } );
});

Answer 2

对于非绿色的部分，带有部分圆的3个图像应该是透明的。然后可以始终覆盖所有4个图像，按钮可以更改堆叠顺序。那些“显示”将在实心圆圈的顶部，而其他的将在它下面。

Answer 3

你也可以使用完整的图像作为div的背景，然后使用绿色，叠加或其他方法对其进行3次划分，然后只需切换叠加层的可见性或类别。

我不会说比上面更好或更差，但不同。

圆形图像叠加

3 个答案: