<!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. WordPress基础：让搜索引擎及时更新文章

    如果文章更新之后,想让搜索引擎也及时更新,你需要以下步骤 1.快速编辑文章时,勾选ping 2.设置->阅读,保证搜索引擎允许搜索 3.设置->撰写->添加url 通知url列表参考 ...

  2. zx一篇让Java程序猿随时可以翻看的Oracle总结

    一篇让Java程序猿随时可以翻看的Oracle总结 前言:Oracle学习也有十几天了,但是呢,接下来还要学习许多其他的东西,并不能提步不前,所以在此总结了以下Oracle中常用的命令和语句,没有语法 ...

  3. web前端开发培训和自学 哪种选择更适合你

    web前端相对于其他软件开发是比较容易入门的,但是如果深入学习就比较困难了,这门技能需要从业人员掌握一定的设计.代码.交互技能和一些SEO技能,容易入门还涉及这么多知识和技能,那学习web前端开发到底 ...

  4. oracle or语句的坑

    SELECT SUM(tjo.pay_amount) FROM tb_jf_order tjo,tb_jf_gateway_trade_log tjg WHERE tjo.order_id = tjg ...

  5. C语言一维数组、二维数组、结构体的初始化

    C语言数组的初始化表示方法 一.C语言一维数组初始化: (1)在定义数组时对数组元素赋以初值.如: static int a［10］={0,1,2,3,4,5,6,7,8,9}; 经过上面的定义和初始 ...

  6. Sass与Web组件化相关的功能

    Sass https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass (Syntactically Awesome Stylesheet ...

  7. Python基础学习-Python中最常见括号()、[]、{}的区别

    Python中最常见括号的区别: 在Python语言中最常见的括号有三种,分别是:小括号().中括号[].花括号{}:其作用也不相同,分别用来代表不同的Python基本内置数据类型. Python中的 ...

  8. sql服务器启动不了问题

    问题:the the service mysql56 failed the most recent status change request with the messagethe service  ...

  9. sprint3个人总结

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

  10. 第十二章Fundamental Data Types 基本数据类型

    目录: 12.1 数值概论 12.2整数 12.3浮点数 12.4 字符和字符串 12.5布尔变量 12.6枚举类型 12.7具名常量 12.8数组 12.9创建你自己的类型 12.1   数值概论 ...