这次主要是通过改变列表的浮动值来实现点击跳动效果，因为是点击列表的的每一个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. oracle空表导出的问题

    之前再做项目的时候下载了一个开源的程序,数据库在移植的时候通过exp/imp导入导出,结果程序在启动时报错,对比过后发现两个数据库表相差了十几个,再排查问题,发现少掉的十几个表全部是空表,查了一下or ...

  2. 2016-08-16: copy-and-swap

    #include <algorithm> // std::copy #include <cstddef> // std::size_t #include <stdio.h ...

  3. Qlik 函数说明

    集合表达式 包括 标识符 标识符 说明 1 表示应用程序中所有记录的完整集合,而不考虑选择的任何选择项.考虑维度 $ 表示当前选择项的记录.因此,集合表达式 {$} 与不陈述集合表达式的意义等同. $ ...

  4. 【转】关于LWF——线性工作流

    1.什么是LWF? LWF全称Linear Workflow,中文翻译为线性工作流.“工作流”在这里可以当作工作流程来理解.LWF就是一种通过调整图像Gamma值,来使得图像得到线性化显示的技术流程. ...

  5. mongoDB 使用手册

      1.基本操作db.AddUser(username,password) 添加用户db.auth(usrename,password) 设置数据库连接验证db.cloneDataBase(fromh ...

  6. JStrom的zk数据

    /jstorm/masterlock 用于LeaderSelector的锁. /jstorm/master get /jstorm/master localhost.localdomain:7627 ...

  7. Windows下Nginx的启动、停止等命令

    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...

  8. Docker上运行dotnet core

    下载microsoft/dotnet镜像 运行命令: docker pull microsoft/dotnet 如果没有使用阿里镜像加速的,参照这篇先配置好再跑上面命令: http://www.cnb ...

  9. 博客的开端，找对象不再new

    今天是第一次用blog,小白开始完善了!! 希望大家多多照顾一下.

  10. Android菜鸟成长记3-activity类

    Activity 一.什么是activity Activity 是用户接口程序,原则上它会提供给用户一个交互式的接口功能.它是 android 应用程序的基本功能单元.Activity 本身是没有界面 ...