开关灯效果

预览效果

HTML代码

<div id="cl">
  <div class="lightbulb"><span></span></div>
  <div class="light-switch"></div>
</div>

CSS代码

html,body{height:auto}
body{ background-color: #000}
.lightbulb{ float: left; width: 150px; height: 150px; background: url(images/lightbulb.png) no-repeat right 0}
.lightbulb span{ display:block;width: 150px; height: 150px;background: url(images/lightbulb.png) no-repeat 0 0;opacity:0;filter: alpha(opacity=0)}
.light-switch{ float: left; width: 80px; height: 120px; cursor: pointer; background: url(images/light-switch.png) no-repeat right 0}
.light-switch.open{ background-position:0 0 }

JS代码

$(".light-switch").click(function(){
  if ($(this).hasClass("open")) {
    $(this).removeClass("open");
    $(".lightbulb span").fadeTo("slow", 0.00)}
  else{
    $(this).addClass("open");
    $(".lightbulb span").fadeTo("slow", 1.00)}
});

图片素材