5.18-5.22js调制样式

这次主要是通过改变列表的浮动值来实现点击跳动效果,因为是点击列表的的每一个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是很好的工具去实现网页中的一些动态效果,不过在学习过程中注意的是其中编写的逻辑问题,

这些是浏览器不会主动报错警告的,不容易发现问题,需要自己仔细推敲。

你可能感兴趣的:(js)