<!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. 20155307 2016-2017-2 《Java程序设计》第8周学习总结

    20155307 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 日志API:使用日志的起点是Logger类,要取得Logger类,必须使用Logger的静态 ...

  2. java fastjson 设置全局输出name最小化

    1.通过自定义Filter实现 https://github.com/alibaba/fastjson/wiki/SerializeFilter public class JackJsonLowCas ...

  3. 【转载】package-info

    本文是转载,原文地址:http://strong-life-126-com.iteye.com/blog/806246 package-info.java对于经常使用外部包的程序员来说应该是熟悉陌生人 ...

  4. nginx配置文件参数详解

    nginx配置文件主要分为4部分:main(全局设置)    main部分设置的指令将影响其他所有设置server(主机设置)server部分的指令主要用于指定主机和端口upstream(负载均衡服务 ...

  5. Linux内核分析 05

    扒开系统调用的三层皮(下) 一,给MenuOS增加time和time-asm命令 把time和time-asm添加到MenuOS里面去 作为命令.扩展MenuOS的功能.本周把上周增加的系统调用添加进 ...

  6. 【图片服务器】搭建Nginx图片服务器

    一.安装Nginx 二.安装vsftpd 三.开始搭建Nginx图片服务器 1.效果 例如:图片通过ftp服务上传到/home/ftpuser/www/images目录下,我想通过访问Nginx服务器 ...

  7. python 字典输出键值对

    d = {, , } for dict_key, dict_value in d.items(): print(dict_key,'->',dict_value)

  8. 重塑 data.table

    在前面的章节中,我们已经学习了如何使用 reshape2 扩展包对 data.frame 进行塑形.其实,data.table 扩展包为 data.table 对象提供了更快更强的 dcast( ) ...

  9. 用 SQL 对关系型数据库进行查询

    前面几节中,我们已经掌握了如何向 SQLite 数据库中写入数据.这一节,我们将学习如何根据需求对数据库进行查询,进而从中获取数据.接下来的例子中会使用 data/datasets.sqlite(之前 ...

  10. 最好的移动触摸滑动插件：Swiper

    最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...