<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 590px;
            height: 340px;
            border: #000 1px solid;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
        }

        #box li {
            position: absolute;
            width: 590px;
            height: 340px;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function () {
            var oBox = document.getElementById('box');
            var aLi = oBox.children;

            var w = 40;

            for (var i = 1; i < aLi.length; i++) {
                aLi[i].style.left = oBox.offsetWidth - w * (aLi.length - i) + 'px';
            }

            for (var i = 0; i < aLi.length; i++) {
                aLi[i].index = i;
                aLi[i].onmouseover = function () {
                    for (var i = 0; i < aLi.length; i++) {
                        if (i <= this.index) {
                            move(aLi[i], {left: w * i});
                        } else {
                            move(aLi[i], {left: oBox.offsetWidth - w * (aLi.length - i)});
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<ul id="box">
    <li style="background: pink"></li>
    <li style="background: green"></li>
    <li style="background: yellow"></li>
    <li style="background: red"></li>
    <li style="background: blue"></li>
</ul>
</body>
</html>

js手风琴的更多相关文章

  1. js手风琴图片切换实现原理及函数分析

    关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...

  2. 原生js手风琴效果

    //js代码 //获取li var list = document.getElementsByTagName("li")[0]; //遍历  排他 for( var i=0;i&l ...

  3. Js 手风琴效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JS手风琴特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  6. 纯js代码实现手风琴特效

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...

  7. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  8. 纯js和纯css+html制作的手风琴的效果

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

  9. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

随机推荐

  1. django对数据查询结果进行排序的方法

    在你的 Django 应用中,你或许希望根据某字段的值对检索结果排序,比如说,按字母顺序. 那么,使用 order_by() 这个方法就可以搞定了. ? 1 2 >>> Publis ...

  2. vert.x学习（四），使用模板解析器ClassLoaderTemplateResolver

    在vert.x中使用模板解析,可以为我们带来很多方便.我这里学习了一下ClassLoaderTemplateResolver的简单使用.这次工程配置与上篇一样,不需要做任何多的配置.直接编写代码就可以 ...

  3. 在mvc中实现图片验证码的刷新

    首先,在项目模型(Model)层中建立一个生成图片验证码的类ValidationCodeHelper,代码如下: public class ValidationCodeHelper { //用户存取验 ...

  4. 配置Tomcat web保存文件到项目路径之外

    <Host name="localhost"  appBase="webapps"            unpackWARs="true&qu ...

  5. 关于sed用法

    sed处理流程 sed的处理流程,简化后是这样的: 1.读入新的一行内容到缓存空间: 2.从指定的操作指令中取出第一条指令,判断是否匹配pattern: 3.如果不匹配,则忽略后续的编辑命令,回到第2 ...

  6. sqlite数据库相关总结

    1. sqlite是轻量型.关系型管理系统,是嵌入式的,占用资源低.可移植性强,比mySql处理速度快,现在主流的版本是sqlite3 2. sqlite中的数据类型有TEXT(字符串,采用UTF-8 ...

  7. idea使用心得(3)-重构初探

    上一篇idea心得中,介绍了快捷键的用法.其中提及了重构神器Alt+Ctrl+Shift+T , 当时只是稍稍提及,本文重点在idea提供的重构选项.后续会有<重构,改善既有代码的设计>的 ...

  8. 2.Linux如何学习

    Linux的应用: 企业应用 个人应用 平行运算:所谓的平行运算指的是将原本的工作分成多份然后交给多台主机去运算,最终再将结果收集起来的一种方式.由于通过高速网络使用到多台主机(集群),将原本需要很长 ...

  9. MongoDB的安装和配置成服务的三种方法和一些难点

    1. Hotfix KB2731284 or later update is not installed的问题: If you are running any edition of Windows S ...

  10. 在Swift项目中使用cocoaPods导入第三方OC库

    首先保证你的项目是基于cocoaPods的,并且是通过XX.xcworkspace打开的.cocoaPods安装教程(Xcode6以上) 下面就第三方库MBProgressHUD来讲解如何在Swift ...