<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         * {

             margin: 0px;

             padding: 0px;

         }

     </style>

 </head>

 <body>

     <div style="width: 750px; height: 400px; position: relative; margin: 50px auto; overflow: hidden;">

         <div id="dd1" style="background-image: url(img/1.jpg); background-size: contain; width: 600px; height: 100%; position:absolute; float: left; left: 0%;transition:1s;" onmouseover="bian(1)"></div>

         <div id="dd2" style="background-image: url(img/2.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 30px;transition:1s;" onmouseover="bian(2)"></div>

         <div id="dd3" style="background-image: url(img/3.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 60px;transition:1s;" onmouseover="bian(3)"></div>

         <div id="dd4" style="background-image: url(img/4.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 90px;transition:1s;" onmouseover="bian(4)"></div>

         <div id="dd5" style="background-image: url(img/5.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 120px;transition:1s;" onmouseover="bian(5)"></div>

         <div id="dd6" style="background-image: url(img/6.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 150px;transition:1s;" onmouseover="bian(6)"></div>

     </div>

 </body>

 </html>

 <script type="text/javascript">

     dd1 = document.getElementById("dd1");

     dd2 = document.getElementById("dd2");

     dd3 = document.getElementById("dd3");

     dd4 = document.getElementById("dd4");

     dd5 = document.getElementById("dd5");

     dd6 = document.getElementById("dd6");

     function bian(n) {

         if (n == )

         {

             dd1.style.left = "0px";

             dd2.style.left = "600px";

             dd3.style.left = "630px";

             dd4.style.left = "660px";

             dd5.style.left = "690px";

             dd6.style.left = "720px";

         }

         if (n == ) {

             dd1.style.left = "0px";

             dd2.style.left = "30px";

             dd3.style.left = "630px";

             dd4.style.left = "660px";

             dd5.style.left = "690px";

             dd6.style.left = "720px";

         }

         if (n == ) {

             dd1.style.left = "0px";

             dd2.style.left = "30px";

             dd3.style.left = "60px";

             dd4.style.left = "660px";

             dd5.style.left = "690px";

             dd6.style.left = "720px";

         }

         if (n == ) {

             dd1.style.left = "0px";

             dd2.style.left = "30px";

             dd3.style.left = "60px";

             dd4.style.left = "90px";

             dd5.style.left = "690px";

             dd6.style.left = "720px";

         }

         if (n == ) {

             dd1.style.left = "0px";

             dd2.style.left = "30px";

             dd3.style.left = "60px";

             dd4.style.left = "90px";

             dd5.style.left = "120px";

             dd6.style.left = "720px";

         }

         if (n == ) {

             dd1.style.left = "0px";

             dd2.style.left = "30px";

             dd3.style.left = "60px";

             dd4.style.left = "90px";

             dd5.style.left = "120px";

             dd6.style.left = "150px";

         }

     }

 </script>

Js 手风琴效果的更多相关文章

  1. 原生js手风琴效果

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

  2. JS+JQ手风琴效果

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

  3. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  4. js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...

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

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

  6. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  7. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  8. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  9. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

随机推荐

  1. Amber安装并行

    现在简单介绍一下amber12中安装openmpi并行的过程. 1. 下载openmpi版本在1.5-1.9之间的(openmpi-1.6.5.tar.bz2) 这是因为$AMBERHOME/Ambe ...

  2. WordPress配置

    1.准备工作: 下载comsenzexp.exe 下载wordpress.zip 2.安装comsenzexp.exe,安装有个wwwroot目录: 3.解压wordpress.zip,然后ctrl+ ...

  3. linux 常用命令总结(二)

    1. linux下以指定的编码打开文件:LANG=zh_CN vi fileName 2. 查看系统内存使用,可以使用free -m 或 top 3. 使用env查看所有环境变量 4. df –h 查 ...

  4. 20145105 《Java程序设计》第3周学习总结

    20145105 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 一.类与对象 要产生对象必须先定义类,类是对象的设计图,对象是类的实例. (一)定义类 1.类定义 ...

  5. 2017-2018-1 JaWorld 团队作业--冲刺4

    2017-2018-1 JaWorld 团队作业--冲刺4 (20162305) 总体架构 我们本次团队项目设定为基于Android系统Java架构下的打飞机小游戏 游戏中所有模型的原型设定是精灵,因 ...

  6. 课堂练习——Hash 20162305

    课堂练习--Hash 20162305 课堂练习要求 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合: ...

  7. CodeForces 450B Jzzhu and Sequences（矩阵快速幂）题解

    思路: 之前那篇完全没想清楚,给删了,下午一上班突然想明白了. 讲一下这道题的大概思路,应该就明白矩阵快速幂是怎么回事了. 我们首先可以推导出 学过矩阵的都应该看得懂,我们把它简写成T*A(n-1)= ...

  8. SDN原理 OpenFlow协议 -1

    本文基于SDN原理视频而成:SDN原理 OpenFlow OpenFlow 协议 和 传统的路由选择协议 有很多相似的地方,同时在某些地方也具有一定的颠覆性. 路由表,由IP地址和子网掩码组成.MAC ...

  9. 使用 while 循环

    与 for 循环不同,while 循环会一直运行,直到给定条件不满足为止.例如,下面的 while 循环从 x=0 开始.每次循环都会检查 x<=10 是否成立.如果成立,就执行循环内部的表达式 ...

  10. Java回顾之一些基础概念

    类的初始化顺序 在Java中,类里面可能包含:静态变量,静态初始化块,成员变量,初始化块,构造函数.在类之间可能存在着继承关系,那么当我们实例化一个对象时,上述各部分的加载顺序是怎样的? 首先来看代码 ...