开关灯效果 - H-ui前端框架代码特效

开关灯效果

预览效果

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)}
});

图片素材


打包下载 快乐飞艇规则 快乐飞艇怎么充值 快乐赛车规律公式 快乐飞艇怎么玩 快乐飞艇和值怎么计算 全天快乐赛车人工计划 快乐飞艇怎么玩才能赢 快乐赛车开奖记录 5分钟一开的快乐飞艇 快乐飞艇如何玩才稳