<!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. vert.x学习（二），使用Router来定义用户访问路径

    这里需要用到vertx-web依赖了,依然是在pom.xml里面导入 <?xml version="1.0" encoding="UTF-8"?> ...

  2. vs2015启动网站调试提示 HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容。 解决方法

    今天安装了vs2015 下载一个项目进行试用,启动调试的时候提示 HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容. 最可能的原因: 没有为请求的 URL ...

  3. wget

    Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到 本地服务器.如果我们使用虚拟主机,处理这样 ...

  4. java中分页效果的实现代码

    首先是将分页所需的一些个资源 ,抽象出一个javabean对象-PageBean: 先把需要分页的数据或是记录都查询出来 存入一个集合类里如List或是Vector, 然后利用其sublist(int ...

  5. django-- Models

    数据库配置 django默认支持sqlite,MySQL,Oracle,postgresql数据库 如何将数据库设置为MySQL 将setting中的database修改: DATABASES = { ...

  6. 用户引导页--- ScrollView的使用

    一.首先第一步,写好用户轮播页的viewController,比如叫做LVUserGuideVC,关键代码是配置和scrollView和pageControl. (1)scrollView的设置 se ...

  7. 关于apache做301的问题

    http://www.internetmarketingninjas.com/blog/search-engine-optimization/301-redirects/ RedirectMatch ...

  8. 在ubuntu上建立多svn版本库

    http://lucane.iteye.com/blog/857486 mkdir ~/dev/repository svnadmin create ~/dev/repository/a svnadm ...

  9. MVC5中EF6 Code First启动慢及间隙变慢优化的实践经验（转）

    最近项目在使用EF了,mvc使用EF确实方便,因为添加功能的时候可以使用vs自动生成用ef的增.删.查.改的模板,大的提高的工作效率.但是很多人都遇到过用EF开发的程序在第一次访问的时候会比用ADO纯 ...

  10. Java提高篇——单例模式

    介绍 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就是我们今天要 ...