<!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. validform.js+layer.js 表单验证样式

    $("#formAdd").Validform({ tiptype: function (msg, o, cssctl) { if (o.type == 3) {//失败 laye ...

  2. Android开发--取消AsyncTask

    在Android应用开发过程中,为了防止UI线程堵塞,耗时的工作都应该另起一个后台线程来完成,其中AsyncTask就是其中的一种方式.最近在案子中需要“停止/取消”某个AsyncTask,在网上查了 ...

  3. cmd中执行jar文件命令（待参数）

    cmd中执行jar文件命令(待参数) 1,jar文件路径:F:\products 2,cmd命令: --两个日期参数(空格隔开) java -jar F:\products\analysis.jar ...

  4. Linux的crontab

    如果要让unix系统重复,定期做一件事,我们就会用到crontab． 实质上真正去执行每一个重复任务的是cron,cron是的unix家族的一个后台常驻程序,cron是由cron文件来驱动的,cron ...

  5. 20145104张家明 《Java程序设计》第3周学习总结

    20145104张家明 <Java程序设计>第4周学习总结 教材学习内容总结 第四章 认识对象 4.1 类与对象 4.1.1 定义类 类定义时使用class关键词,建立实例要用new关键词 ...

  6. RC522 模块驱动程序

    本文主要讲述了基于SPI总线的RC522驱动程序的设计.描述了主控如何与从设备通过SPI总线进行数据的读写. 一 在SPI驱动中,有两个重要的结构:spi_device&spi_driver. ...

  7. 51nod 1042 数字0-9的数量

    给出一段区间a-b,统计这个区间内0-9出现的次数.   比如 10-19,1出现11次(10,11,12,13,14,15,16,17,18,19,其中11包括2个1),其余数字各出现1次. Inp ...

  8. CNN中dropout层的理解

    dropout是在训练神经网络模型时,样本数据过少,防止过拟合而采用的trick.那它是怎么做到防止过拟合的呢? 首先,想象我们现在只训练一个特定的网络,当迭代次数增多的时候,可能出现网络对训练集拟合 ...

  9. MSSQL 重建索引（在线重建、控制最大处理器数 、MAXDOP ）

    一.什么情况下需要重建索引 1.碎片过多(参考值:>20%) 索引碎片如何产生,请移步至< T-SQL查询高级—SQL Server索引中的碎片和填充因子> 2.填充度过低(参考值: ...

  10. UVa 1664 Conquer a New Region（并查集）

    https://vjudge.net/problem/UVA-1664 题意: n个城市形成一棵树,每条边有权值C(i,j).任意两个点的容量S(i,j)定义为i与j唯一通路上容量的最小值.找一个点, ...