这次主要是通过改变列表的浮动值来实现点击跳动效果，因为是点击列表的的每一个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调制样式的更多相关文章

  1. 终端的乐趣--Linux下有趣的终端命令或者工具【转】

    转自:https://blog.csdn.net/gatieme/article/details/52144603 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

  2. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  3. echart.js的使用与API

    ---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...

  4. 二、JavaScript语言--JS基础--JavaScript入门篇

    1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...

  5. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  6. IZT复杂电磁环境记录回放和模拟系统

    结合实验室复杂电磁环境特性与模拟研究需求,实现对复杂多变的电磁环境录制.分析.重构和模拟,记录回放系统应具备如下几项能力: 1.电磁环境信号记录能力:能够实现对9KHz-18GHz频带范围内射频信号的 ...

  7. 微信小程序入门（四）

    16.WXSS特性之模板及引用 模板引用 index.wxml <template name="tempItem"> <view> <view> ...

  8. HTML+CSS基础课程二

    1.border为系统加边框<style type="text/css"> table tr td,th{border:1px solid #000;} </st ...

  9. 《CWNA官方学习指南(第3版)：认证无线网络管理员PW0-105》

    <CWNA官方学习指南(第3版):认证无线网络管理员PW0-105> 基本信息 原书名:CWNA: Certified Wireless Network Administrator Off ...

随机推荐

  1. Monty Hall Problem的一个图解，感觉不错

    从Coursera.org上的台大概率课讨论组里拿来的 如果不转换,选中汽车的概率是1/3,非常显然. 但转换后选中汽车的概率变成2/3就有点反直觉了,并不是太容易想明白. 因为转换其实有4种:汽车- ...

  2. Could not load file using Ranorex runtime : General Questions

    如果你将编译好的bin文件夹复制到另一个未安装Ranorex程序的电脑上运行遇到如下错误信息 Could not load file or assembly 'Ranorex.Core, Versio ...

  3. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明

    X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与 content="IE=7"在无论页面是否包含<!DOCTYPE> ...

  4. 一千行MySQL学习笔记

    以下为本人当年初学MySQL时做的笔记,也从那时起没再更新过,但还是囊括了基本的知识点,有时还翻出来查查.是不是干货,就看亲们了~ 如果哪天笔记有更新了,我还是会更新该文章滴,其实笔记已经放到了Git ...

  5. [转载]:Fortran字符串的故事

    一. Fortran 字符串与 C 字符串的区别  Fortran的字符串处理能力其实很弱,关于字符串的语法还很落后.它与 C 字符串最大的区别就是:Fortran字符串是固定长度的,没有 \0 结束 ...

  6. Mysql 小技巧

    查询出的日期 加一天,加一周,加一月,加一年 DAY)); WEEK)); MONTH)); YEAR)); 查询出的日期 减一天,减一周,减一月,减一年 DAY)); WEEK)); MONTH)) ...

  7. zend 快捷键

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前 ...

  8. ecshop 商品页面添加商品标签:

    /* @脚垫客户 需要给商品加属性.最简单粗暴的办法.后台调用加入.界面没有美化. */ goods.dwt <ul class="quantity"> <h2& ...

  9. KMP算法简明扼要的理解

    KMP算法也算是相当经典,但是对于初学者来说确实有点绕,大学时候弄明白过后来几年不看又忘记了,然后再弄明白过了两年又忘记了,好在之前理解到了关键点,看了一遍马上又能理解上来.关于这个算法的详解网上文章 ...

  10. [转]Debug 和 Release 编译方式的区别

    本文主要包含如下内容: 1. Debug 和 Release 编译方式的本质区别 2. 哪些情况下 Release 版会出错 3. 怎样“调试” Release 版的程序 Debug 和 Releas ...