标志设置——两组按钮控制一个图片

 

上面的动图展示了实现效果，左边的按钮控制图片的正面和侧面切换，右边按钮控制钟表颜色切换。

但是当左边按钮放在正面时，右边按钮切换颜色只是正面。

左边按钮放在侧面时，右边按钮切换颜色只是侧面。

当右边按钮选中颜色时，左边按钮切换同样颜色的正侧面。

右边的按钮做了鼠标移入灰色背景突出，移出恢复，但是当鼠标点击时灰色背景放大，移入移出不会触发此按钮的移入移出效果，但不会改变其他按钮。

其中按钮使用灰色圆圈做背景，上面放button按钮内部背景色，边框白色。

这一组效果的代码如下：

html：

<!--左边图片-->
<div id="pop_btmPt">
    <img src="../images/pop/color.png" width="140%" style="position: absolute;top: -88px; left: -85px;">
</div>
<!--左侧导航-->
<div id="zuo_dh">
    <ul>
        <li class="btn_dot" onMouseOver="ht(0)" style="border-color: #7f7f7f;"><div class="dot"></div></li>
        <li class="btn_dot" onMouseOver="ht(1)"><div class="dot"></div></li>
    </ul>
</div>
<!--颜色选择按钮框架-->
<div id="pop_color">
    <div><button style="background-color: #BFCED6;"></button></div>
    <div><button style="background-color: #F3C4BF;"></button></div>
    <div><button style="background-color: #EA6C56;"></button></div>
    <div><button style="background-color: #EBBC4E;"></button></div>
    <div><button style="background-color: #1B365D;"></button></div>
    <div><button style="background-color: #244C5A;"></button></div>
    <div><button style="background-color: #502B3A;"></button></div>
</div>

View Code