色块会不停的移动
加几个随机数的话就是Wp的那个会动的小人插件的雏形
好吧其实今天我想讲的不是这个
而是下面那个按钮
把鼠标移上去试试吧~
很好玩的一个效果~
原理是外部div里面隐藏了一个宽度为零的div
鼠标移上去宽度慢慢变长
移开又变回零~
这个可以干嘛呢？
进度条 雏形
一些从左到右变色的BUTTON
随时间？音乐？变化的彩虹？
反正很大效果了~~
挺好玩的
下面贴一下源码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<style type="text/css">
.outDiv{
width: 200px;
height: 40px;
background: red;
}
.innerDiv{
width: 0px;
height: 40px;
background: blue;
z-index: 10;
}
</style>
<div class="outDiv">
<div class="innerDiv">
</div>
</div>
<script type="text/javascript">
$(".outDiv").hover(function(){
$(".innerDiv").animate({width:'200px'},"slow");
});
$(".outDiv").mouseleave(function(){
$(".innerDiv").animate({width:'0px'},"slow");
});
</script>