这次主要是通过改变列表的浮动值来实现点击跳动效果，因为是点击列表的的每一个li都可跳动整个列表，
所以是双for循环，第一个是控制点击事件，第二个是循环改变每个li的flot值。
另外要改变每次点击后的点击事件，所以需要一个开关来控制每次点击的效果。
后面添加了一点通过js实现伪类的效果。
注意在js中获取的样式属性名类似font-size的需要去掉”-“后，其后面的第一个字母须大写。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li{
list-style: none;
width: 100px;
height: 100px;
border: 1px solid red;
}
ul{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
var flag=true;
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].style.cssFloat=flag?"left":"none";
}
if(flag){
flag=false;
}else{
flag=true;
}
}
lis[i].onmouseover=function(){
this.style.backgroundColor="grey";
}
lis[i].onmouseout=function(){
this.style.backgroundColor="white";
}
}
} </script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
js是很好的工具去实现网页中的一些动态效果，不过在学习过程中注意的是其中编写的逻辑问题，
这些是浏览器不会主动报错警告的，不容易发现问题，需要自己仔细推敲。