css教程自学-制作切换背景插件

1.去上网搜索准备一张素材图片

2.如果某类图片按钮触发,将会启动效果

初始效果:

某类图片按钮的代码:

<div class="sharee">
            <a href="javascript:;" class="btn_picimgplugin_item"><img src="" width="48" height="48" alt="Imgs1" style="border:0"/></a>
            <a href="javascript:;" class="btn_picimgplugin_item"><img src="/s/images/bg/1.jpg" width="48" height="48" alt="Imgs1" style="border:0"/></a>
        </div>

 

它们的响应事件:

$('.btn_picimgplugin_item').live("click", function(event) {
                    var a = $(this);
                    var img = a.children("img");
                    $("#content").css({"background":"url("+img.prop('src')+") no-repeat left top"});
              });

这个代码是说,设置某个大窗口背景图片为图片按钮的背景图片.

现在运行:

3.将子控件美化

定义一个透明样式.

    .pkimgplugin_effect_transparent{
        background:transparent !important;
    }

如果需要使用样式,只需要增加这个类,如果想移除样式,只要移除这样类即可.

现在JS:

$('.btn_picimgplugin_item').live("click", function(event) {
                    var a = $(this);
                    var img = a.children("img");
                    $("#content").css({"background":"url("+img.prop('src')+") repeat left top"});
                    
                    var conchild1 = $("#container");
                    if(!conchild1.hasClass("pkimgplugin_effect_transparent")){
                        conchild1.addClass("pkimgplugin_effect_transparent");
                        $(".box").addClass("pkimgplugin_effect_transparent");
                    }else{
                        conchild1.removeClass("pkimgplugin_effect_transparent");
                        $(".box").removeClass("pkimgplugin_effect_transparent");
                    }
              });

运行后:

如果取消背景:

暂时到这里,我要去处理别的事.