0%

换肤

换肤效果

昨天学一了个网页换肤的效果:点击换肤,会出来相应图片供选择,替换背景。最后的效果达到了,再来回顾一下制作过程中自己觉得下次需要重视和仍旧搞不清的点。

58cdfc7c09f1e.jpg

给“换肤”使用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属性会返回给所有同胞元素并去除。