<!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. 基于ssh框架开发的购物系统的质量属性

    根据前面的博客,我们已经大致了解了ssh架构开发整体概念:Struts是一个实现了MVC模式的经典的框架:Hibernate是轻量级Java EE应用的持久层解决方案,以面向对象的方式提供了持久化类到 ...

  2. python垃圾回收机制的一些理解

    概览:       主要通过 引用计数来进行垃圾收集, 就是说,当一个对象没有被其他对象引用的时候,会释放掉内存.     但是会有一些循环引用的对象,通过上面的方法,是没有办法清除掉的.所以,pyt ...

  3. 【OpenWRT】【RT5350】【二】烧写OpenWrt到RT5350开发板

    烧写bin文件到开发板的方式有很多种,我采用的是通过web页面直接上传文件的方式 首先通过浏览器登陆路由器(192.168.1.1),作者的开发板已经烧好了OpenWrt并且可以通过Luci登陆,所以 ...

  4. JAVASE02-Unit09： 多线程基础

    Unit09: 多线程基础 * 线程 * 线程用于并发执行多个任务.感官上像是"同时"执行 *  * 创建线程有两种方式. * 方式一: * 继承线程并重写run方法来定义线程要执 ...

  5. 限制EditText最多输入多少汉字

    mInputEditText.setFilters(new InputFilter[]{new InputLengthFilter(MAX_INPUT_SIZE)}); public class In ...

  6. 阿里云docker镜像加速

    echo "DOCKER_OPTS=\"--registry-mirror=https://yeyieqis.mirror.aliyuncs.com\"" | ...

  7. Infinite V1 Release Note

      游戏地址 PLAY 玩法说明 WASD 控制角色移动 更新内容 - 初步完成了角色移动(攻击状态) 开发心得 独立做游戏 其实最耽误时间的就是在自己的短板上, 对于我来说 就是3D建模和动作制作. ...

  8. Oracle 正则表达式函数-REGEXP_INSTR 使用例子

    原文在这 戳 REGEXP_INSTR 6个参数 第一个是输入的字符串 第二个是正则表达式 第三个是标识从第几个字符开始正则表达式匹配.(默认为1) 第四个是标识第几个匹配组.(默认为1) 第五个是指 ...

  9. OEIS A140358

    以前也许做过? 有点方 最小整数1到k 加减得到 n 1+-2+-3+-...+-k = n 求最小k #include <cstdio> #include <algorithm&g ...

  10. Spring jar下载地址：

    https://repo.spring.io/release/org/springframework/spring/