<!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. Web前台学习总结

    前台的技术有很多种,流行的框架也是枚不胜举,在这里我们只讨论html,css,js这些基本的技术,相信大家如果掌握了这些最基本的技术,其他的技术也就会使用了. 下面是一个案例的形式来讲解上述的技术. ...

  2. 手把手教你学node.js之学习使用外部模块

    学习使用外部模块 目标 建立一个 lesson2 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/?q=alsotang 时,输出 alsotang 的 md5 ...

  3. 如何使用iClap创建普通批注

    iClap是一款以产品管理为基础的企业协同办公软件,其中智能批注为其产品管理的核心工具,我们可以以图片,文字和视频的形式创建批注.本文为大家介绍的是如何在iClap上创建普通批注(图片,文字形式). ...

  4. ng-深度学习-课程笔记-3: Python和向量化(Week2)

    1 向量化( Vectorization ) 在逻辑回归中,以计算z为例,$ z =  w^{T}+b $,你可以用for循环来实现. 但是在python中z可以调用numpy的方法,直接一句$z = ...

  5. 如何使用科大 mirrors 加速 pip？

    编辑 ~/.pip/pip.conf 文件(如果没有则创建之),将 index-url 开头的一行修改为下面一行: index-url = https://pypi.mirrors.ustc.edu. ...

  6. CSS3 页面中展示邮箱列表点击弹出发送邮件界面

    CSS3 页面中展示邮箱列表点击弹出发送邮件界面 代码: <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. Android项目开发第四周学习总结

    Android项目开发实战第四周 在本周,我们进行了Android项目第四周的项目开发,在本周,我们对原有的项目进行改进,我们的想法是使项目在原有的基础上增加一些新的功能,使得txt阅读器可以更加先进 ...

  8. Git review ：error: unpack failed: error Missing tree

    环境 git version 1.9.1 Gerrit Code Review (2.11.3) 1 2 现象 修改后调用 git review可以提交到Gerrit上,然后只要一用 git comm ...

  9. HBase参数优化

    zookeeper.session.timeout默认值:3分钟(180000ms)说明:RegionServer与Zookeeper间的连接超时时间.当超时时间到后,ReigonServer会被Zo ...

  10. 网络安全、Web安全、渗透测试之笔经面经总结（一）

    本篇文章总结涉及以下几个方面: 对称加密非对称加密? 什么是同源策略? cookie存在哪里?可以打开吗 xss如何盗取cookie? tcp.udp的区别及tcp三次握手,syn攻击? 证书要考哪些 ...