<!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. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

  2. python 的var_dump

    from __future__ import print_function from types import NoneType __author__ = "Shamim Hasnath&q ...

  3. 如何修改MyEclipse项目的web context-root

    修改一个MyEclipse项目的名称很容易,右键点项目->rename就行了. 但此时项目的web context-root 还没有改变,需要右键点项目->properties->M ...

  4. php类和对象

    <?php 1. 类的简单格式: [修饰符] class 类名{ [成员属性] //成员属性,也叫成员变量 [成员方法] //成员方法:也叫成员函数 } 类的完整格式: [修饰符] class ...

  5. linux下普通用户如何使用80端口启动程序

    linux下普通用户如何使用80端口启动程序 http://blog.csdn.net/shootyou/article/details/6750230 大家都知道默认情况下linux的1024以下端 ...

  6. Static方法在多线程环境下的运行

    最近看了Jfinal 一致对model的那个static final dao有些疑惑,全局一个实例安全吗?同时也出了一个疑惑,静态方法执行会有并发影响吗?看代码 StaticThread.java p ...

  7. iOS网络相关知识总结

    iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...

  8. Hadoop等软件常见运行问题及解决办法

    Hadoop常见问题及解决办法  1.问题:java.io.IOException: Could not locate executable null\bin\winutils.exe in the ...

  9. sprint3个人总结

    转眼间,这个学期又过去了,真的是忙碌的一个学期,却是有点充实,特别是我们的软件工程这门课程,我们这次做的是公众号开发功能,说实话,当初对这个项目有兴趣是因为自己也在弄自己一个300多人的公众号,对于这 ...

  10. 使用hbuilder编辑器实现移动app打包

    作为一枚web前端来讲,需要了解的东西太多,需要学习的也太多了,那天因为公司需求,就研究了下移动网站打包成app的方法,这种东西好像是H5出来后就有推出的,因为性功能不行,就没怎么关注,但现在移动互联 ...