一：纯css+html的手风琴效果

这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。

代码如下：

<!DOCTYPE HTML>

<html>

<head>

<style>

body{background: url('bg.gif') repeat;}

ul,li,p{margin: 0px;padding: 0px;list-style: none;}

 #div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;}

 .list{width: 3200px;}

  .list li{float: left;width: 170px;height: 500px;;position: relative;

      -moz-transition:width 2s;

      transition: width 2s;

     -moz-transition: width 2s; /* Firefox 4 */

     -webkit-transition: width 2s; /* Safari 和 Chrome */

     -o-transition: width 2s; /* Opera */

  }

.list:hover li{width: 107px;}

.list li:hover{width: 538px;}

.list li p{width: 100%;height: 100%;opacity: 0.5;position: absolute;top: 0px;left: 0px;background: black; }

.list li:hover p{opacity:0}

</style>

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

<title></title>

<script type="text/javascript">

</script>

</head>

<body >

<div id="div">

      <ul  class="list"> <!--如果设置父级与子级之间没有空隙的话，将margin和padding设为0即可-->

          <li><img src="data:image/1.jpg" style="width:538px;height:405px;"><p></p></li>

          <li><img src="data:image/2.jpg" style="width:538px;height:405px;"><p></p></li>

          <li><img src="data:image/3.jpg" style="width:538px;height:405px;"><p></p></li>

          <li><img src="data:image/4.jpg" style="width:538px;height:405px;"><p></p></li>

          <li><img src="data:image/5.jpg" style="width:538px;height:405px;"><p></p></li>

          <li><img src="data:image/6.jpg" style="width:538px;height:405px;"><p></p></li>

          <li><img src="data:image/7.jpg" style="width:538px;height:405px;"><p></p></li>

      </ul>

</div>

</body>

</html>

二：纯js+html制作手风琴

     这个手风琴出现一个问题，就是单独移动每个li时，没问题，但是当移动很快时，最右边的li出现空隙。我感觉是定时器的问

题，就是当每个li还没回到自己的位置时，下一个li就开始运动了。但我定时器已经关了啊。

麻烦哪位给我留言，帮我看看怎么改哈！

问题效果如下所示：

代码如下：

<!DOCTYPE HTML>

<html>

<head>

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

<title>手风琴效果</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script src="perfectMove2.js"></script>

<script type="text/javascript">

window.onload=function()

{

    var oDiv=document.getElementById('show1');

    var iMinWidth=9999999;

    var aLi=oDiv.getElementsByTagName('li');

    var aSpan=oDiv.getElementsByTagName('span');

    var i=0;

    var bool=false;

    for(i=0;i<aLi.length;i++)

    {

        aSpan[i].index=i;

        aSpan[i].onmouseover=function ()

        {

              for(i=0;i<aLi.length;i++)

              {

                  startMove(aLi[i],{width:this.offsetWidth});//调用运动函数

                  bool=true;

              }

             if(bool)

             {

               startMove(aLi[this.index],{width:552});

             }

        }

    }

};

</script>

</head>

<body>

<div id="show1">

    <ul>

        <li class="active">

            <span class="bg0">这是第一个</span>

            <img src="data:images/1.jpg" />

        </li>

        <li >

            <span class="bg1">这是第二个</span>

            <img src="data:images/2.jpg" />

        </li>

        <li  >

            <span class="bg2">这是第三个</span>

            <img src="data:images/3.jpg" />

        </li>

        <li>

            <span class="bg3">这是第四个</span>

            <img src="data:images/4.jpg" />

        </li>

        <li>

            <span class="bg4">这是第五个</span>

            <img src="data:images/5.jpg" />

        </li>

        <li>

            <span class="bg5">这是第六个</span>

            <img src="data:images/6.jpg" />

        </li>

    </ul>

</div>

</body>

</html>

//perfectMove2.js代码如下：

function  getStyle(obj,attr)//用此种方法获取样式中的属性

{

     if(obj.currentStyle)

     {

        return obj.currentStyle[attr];

     }

     else

     {

        return getComputedStyle(obj,false)[attr];

     }

}

function startMove(obj,json,fn)

{

        clearInterval(obj.timer);//清除定时器

        obj.timer=setInterval(function ()

       {

        var stop=true;

        for(var attr in json)

        {

                      var iCur=0;

                     if(attr=='opacity')

                     {

                          iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//这里加parseInt是避免div的数值不稳定，在波动

                     }

                     else

                    {

                          iCur=parseInt(getStyle(obj, attr));

                    }

                     var iSpeed=(json[attr]-iCur)/8;

                     iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

                    if(iCur!=json[attr])

                    {

                           stop=false;

                    }

                    if(attr=='opacity')

                         {

                            obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';

                            obj.style.opacity=(iCur+iSpeed)/100;

                        }

                    else

                        {

                             obj.style[attr]=iCur+iSpeed+'px';

                        }

        }

        if(stop)

        {

          clearInterval(obj.timer);

          if(fn){fn();}

        }

      }, 30)

}

纯js和纯css+html制作的手风琴的效果的更多相关文章

  1. 七夕情人节表白-纯JS实现3D心形+图片旋转

    七夕情人节就快到了,这里献上纯js表白神器-心里都是你,预览: 技术点:css-3d.js-随机色.js-transform 1.html: <div class="heart&quo ...

  2. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  3. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  4. [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

  5. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  6. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  7. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 纯JS文本比较工具

    前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctyp ...

  9. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

随机推荐

  1. wap网站safari浏览器和微信cooke不能登录问题

    wap网站safari浏览器cooke不能登录问题: http://wenku.baidu.com/link?url=VnPxl43PySYVygt09vkQ7xwxOD0JCXNtw3Fx7100j ...

  2. .NET破解之太乐地图下载器【非暴破】

    不知不觉,接触破解逆向已经三个月了,从当初的门外汉到现在的小白,这个过程只有经历过才知道其中的苦与乐: 有无知.困惑.痛苦.惊喜.彻悟.欣慰…… 有无助的软件脱壳,茫然的代码分析,有无趣的反复测试, ...

  3. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q81-Q84)

    Question 81You need to create a Web Part that creates a copy of the out-of-the-box Contribute permis ...

  4. android AsyncTask 只能在线程池里单个运行的问题

    android 的AysncTask直接调用Execute会在在一个线程池里按调用的先后顺序依次执行. 如果应用的所有网络获取都依赖这个来做,当有一个网络请求柱塞,就导致其它请求也柱塞了. 在3.0 ...

  5. 在Mac上配置Android adb命令

    一 adb定义: adb(android debug bridge)是android系统中的一种命令行工具,通过它可以和android设备或模拟器通信. 二 在Mac上的配置过程 启动终端 进入当前用 ...

  6. 【原】macbook不睡眠的排查与解决

    这几天突然发现手上的macbook pro笔记本不能睡眠了,就算合上盖子也是如此.有没有进入睡眠可以观察右下角的呼吸灯,如果呼吸灯常亮则说明有问题.所谓“工欲善其事,必先利其器”,攻城狮想敲更多更好的 ...

  7. 【原】训练自己的haar-like特征分类器并识别物体（3）

    在前两篇文章中,我介绍了<训练自己的haar-like特征分类器并识别物体>的前三个步骤: 1.准备训练样本图片,包括正例及反例样本 2.生成样本描述文件 3.训练样本 4.目标识别 == ...

  8. Retrofit源码设计模式解析（下）

    本文将接着<Retrofit源码设计模式解析(上)>,继续分享以下设计模式在Retrofit中的应用: 适配器模式 策略模式 观察者模式 单例模式 原型模式 享元模式 一.适配器模式 在上 ...

  9. 《极客学院 －－NSAttributedString 使用详解－4－UITextKit 简介》学习笔记（待处理）

    如果要在富文本中添加图片的话,用UITextKit才能实现. 什么是UITextKit:它就是处理富文本的框架. 什么时候使用UITextKit:比如要实现图文混搭的节目. 在gitHub中 http ...

  10. SQL Server智能感知如何更新

    经常用sql server发现一个问题,比如说我刚刚添加个表或者字段,这时候在sqlserver里面写sql语句时,没有智能提示,这个问题我以前一直不是太注意.今天好好找了下解决方法,这里做下分享. ...