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是很好的工具去实现网页中的一些动态效果，不过在学习过程中注意的是其中编写的逻辑问题，
这些是浏览器不会主动报错警告的，不容易发现问题，需要自己仔细推敲。
5.18-5.22js调制样式的更多相关文章
- 终端的乐趣--Linux下有趣的终端命令或者工具【转】
转自:https://blog.csdn.net/gatieme/article/details/52144603 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...
- Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
- echart.js的使用与API
---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...
- 二、JavaScript语言--JS基础--JavaScript入门篇
1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...
- 重温CSS：Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- IZT复杂电磁环境记录回放和模拟系统
结合实验室复杂电磁环境特性与模拟研究需求,实现对复杂多变的电磁环境录制.分析.重构和模拟,记录回放系统应具备如下几项能力: 1.电磁环境信号记录能力:能够实现对9KHz-18GHz频带范围内射频信号的 ...
- 微信小程序入门（四）
16.WXSS特性之模板及引用 模板引用 index.wxml <template name="tempItem"> <view> <view> ...
- HTML+CSS基础课程二
1.border为系统加边框<style type="text/css"> table tr td,th{border:1px solid #000;} </st ...
- 《CWNA官方学习指南(第3版)：认证无线网络管理员PW0-105》
<CWNA官方学习指南(第3版):认证无线网络管理员PW0-105> 基本信息 原书名:CWNA: Certified Wireless Network Administrator Off ...
随机推荐
- Flex 加载dxf
因为已经写过加载dwg了,dxf应该不陌生,dxf是个开源格式,所以加载比较简单这里直接附上as的代码,但是真正使用场景还是比较少,dwg文件比较多 package widgetscadastre.S ...
- 7，SFDC 管理员篇 - 数据模型 - 公式和验证 1
1,自定义公式 Customize | Your Object | Fields | Add Fields Field SF的公式和Excel的公式差不多,都是支持各种运算和结果 例1,以opport ...
- ArrayList、HashTable、List、Dictionary的演化及如何选择使用
在C#中,数组由于是固定长度的,所以常常不能满足我们开发的需求. 由于这种限制不方便,所以出现了ArrayList. ArrayList.List<T> ArrayList是可变长数组,你 ...
- c#基础-oop(面向对象理解)
OOP-面向对象 封装,继承多态 一个桌子,用面向对象来描述一下它这个桌子项目 定义桌子类 对象:桌子 桌子的属性:名字,材质,体积 桌子的方法;放东西(方法) 现在桌子要放书,放花瓶,放文件(这里就 ...
- jQuery鼠标事件汇总
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. 1.click事件:点击鼠标左键时触发 $('p').click(function(){}); 示例: $('p').click(func ...
- android自定义进度圆与定时任务
先看代码:自定进度圆 public class ProgressCircle extends View { private Paint paint; private int strokewidth = ...
- 第八十八天请假 PHP smarty模板 变量调节器，方法和块函数基本书写格式
变量调节器 : 文件命名格式(modifier.名称.php) 前端调用方式<{变量|名称:参数:参数……}>可组合使用,用|隔开 <?php /* 命名格式 smarty_mod ...
- zk源码环境搭建
zk不是使用maven管理的. 将zk的src下的代码导入eclipse,lib下的jar包导入工程. QuorumPeerMain类的main方法是入口,启动了zk的server,参数是conf文件 ...
- (转)UVM内容梗概
1. 类: 面向对象基础传统的面向对象编程与systemverilog类的特点,类的定义,成员与方法,构造函数,对象的复制和深/浅拷贝,父类/子类关系,类的继承,作用域的规则,对象的句柄以及赋值,方法 ...
- 企业好助手U-Mail邮件服务器软件
对于一家企业,最核心的是什么?有人说人才,有人说技术,也有人说是数据(信息),依小编来 看,这些答案都没错,人才会流动,技术在不断更新,唯有数据(信息),日积月累,将沉淀为公司历史的一部分,作为决策的 ...