开关灯效果HTML,开关灯效果

开关灯效果

预览效果

HTML代码

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

});

图片素材