mr.Xiong使用jQuery实现切换背景的效果

                                                                 使用jQuery实现切换背景的效果

 

首先我们就要给切换背景来布局，我们自己想要让切换背景的样子是什么样就可以是什么样子，而我的布局就是上方这张图片的样子，先给一个大盒子，然后再在大盒子里添加span标签和六个div标签，这样的目的就是让这个大盒子把里面的东西全部都包裹起来，接着我们再给这个最大的盒子设置宽度和高度以及背景颜色，然后我紧接着就是在span标签里写“请选择需要切换的颜色”就行了，还要给span标签设置line-height（行高）和float：left（左浮动），另外还需要给他设置margin-left（左外边距），这样span标签就会在最大盒子的中间并且不会紧挨着左侧了，然后我们又需要给那六个div设置样式，给div设置width（宽度），height（高度），background（背景颜色），margin（外边距）以及float-left（左浮动），这样设置的话六个div的background都是同一个颜色了，然后我们需要分别对每个div设置不同的background，按照我上面这样设置了之后就可以得到上面图片的的样子，写完了布局和设置样式后就要写jQuery来实现我们需要的效果了。

下面这张图片是我用了两种方法来实现切换背景颜色的效果

 

我们先声明一个数组，把我们给那六个盒子设置的background（背景颜色）逐个填入形成一个数组，然后再用for（var i=0; i<$（“#box div”）.length; i++）来遍历一下所有的div标签，之后再用 $（“#box div”）[ i ] . id = i ; 让每个div的ID等于i ; 这样我们就知道我们选中的是哪个了，接下来我们先用点击事件来实现切换背景颜色的效果，首先我们先获取到所有的div标签并且给他添加click（点击）事件，然后再声明一个变量来接受我们点击的那个div标签的ID，再获取一下body，$（“#body”）.css（“background”，color[index]）; 这样我们点击哪个div标签，body的背景颜色就会变成对应div里的背景颜色，这样我们就能得到我们需要的效果了，我的另一种方法就是通过mousemove（鼠标移入）事件来实现切换背景的效果，这种方法和通过添加click（点击）事件是一样的，都是先获取到所有的div标签，然后再给他添加mousemove（鼠标移入）事件，之后再用 $（“#box div”）[ i ] . id = i ; 让每个div的ID等于i ; 然后再声明一个变量来接受我们点击的那个div标签的ID，再获取一下body，$（“#body”）.css（“background”，color[index]）;这样得到的是同样的效果，我写的这两种方法基本是一样的，就是添加的事件不一样罢了，来看一下做出来的效果

 

这个就是点击了红色小方框或者鼠标移入了红色小方框所显现出来的效果。