<!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. node必知必会之node简介

    1.什么是node.js 按照: Node.js官方网站主页 的说法: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript ...

  2. 系统管理命令之logname

    logname命令,可以显示自己初次登录到系统中的用户名,主要识别sudo前后情形,与whoami相反. 1.查看该命令的帮助信息. # logname --help 2.查看该命令的版本信息. # ...

  3. 《零起点，python大数据与量化交易》

    <零起点,python大数据与量化交易>,这应该是国内第一部,关于python量化交易的书籍. 有出版社约稿,写本量化交易与大数据的书籍,因为好几年没写书了,再加上近期"前海智库 ...

  4. C#——文件操作类简单封装

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO ...

  5. springcloud21---Config-bus实现配置自动刷新

    Pivotal(毕威拓)有VMware和EMC成立的. RabbitMQ是由ERlang(爱立信开发的,面向并发的编程语言),安装RabbitMQ先要安装ERlang. package com.itm ...

  6. 根据源Excel文件，新建Excel文件

    /** * 描述:根据源Excel文件,创建新的Excel文件 * @param excelFile * @throws CheckException */public static void cre ...

  7. Stitching模块中focalsFromHomography初步研究

    在Stitching模块中,通过“光束法平差”的时候,有一个步骤为“通过单应矩阵估算摄像头焦距”,调用的地方为:   , ));    ] ];    d2 ] ]) ] ]);    v1 ] ]  ...

  8. GreenOpenPaint的实现（三）添加标尺

    标尺对于图像处理程序,特别是需要精确测量的程序来说意义很大.这里进行了专门的研究. 基于现在已经引入的类和定义的变量,主要讲一讲如何调用. 1.添加放大缩小 void CGreenOpenPaintD ...

  9. LSB含义

    LSB(Least Significant Bit)最低有效位,对任何AD来说,量化后输出的数字信号值都是以1LSB的电压值步进的,介于1LSB之间的电压将按照一定的规则进行入位或舍弃,这个过程中造成 ...

  10. 算法准备-分治算法解决第k位数的线性查找

    由作业士兵排队问题引出的 在一个划分成网格的操场上,n个士兵散乱地站在网格点上.网格点由整数最表(x,y)表示.士兵可以沿着网格边上.下.左.右移动一步,但在同一时刻一个网格上只能有一名士兵.按照军官 ...