换肤效果
昨天学一了个网页换肤的效果:点击换肤,会出来相应图片供选择,替换背景。最后的效果达到了,再来回顾一下制作过程中自己觉得下次需要重视和仍旧搞不清的点。
给“换肤”使用span标签,然后class=”click”,“pic”的盒子里装着供选择替换的小图片。点击“换肤”,”pic”滑下;点击文档,“pic”滑上。但是,要阻止冒泡事件。同时,”pic”也包含在文档里,所以,也要阻止冒泡事件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| $(".click").click(function(e){
$(".pic").slideDown();
e.stopPropagation();//阻止冒泡;
})
$(document).click(function(){
$(".pic").slideUp();
})
$(".pic").click(function(e){
e.stopPropagation();//因为PIC包含在document里面;
})
|
滑上滑下的问题解决之后,接下来就是图片的替换啦!
找到“pic”下面的li,点击执行啥啥啥————
ul li").click(function(){1 2 3 4 5 6 7 8
| $(this).addClass("first").siblings().removeClass("first");
var imasrc = $(this).attr("datesrc");//返回匹配元素的值
$("body").css("background-image","url('./images/"+imasrc+"')")
})
|
自定义属性的形式为:“data-*”。
所以上面要写的代码就是:点击li里的当前图片,其class属性会返回给所有同胞元素并去除。