纯js+html和纯css+html制作手风琴效果

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下

一、纯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="image/1.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/2.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/3.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/4.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/5.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/6.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="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="images/1.jpg" />
    </li>
    <li >
      <span class="bg1">这是第二个</span>
      <img src="images/2.jpg" />
    </li>
    <li >
      <span class="bg2">这是第三个</span>
      <img src="images/3.jpg" />
    </li>
    <li>
      <span class="bg3">这是第四个</span>
      <img src="images/4.jpg" />
    </li>
    <li>
      <span class="bg4">这是第五个</span>
      <img src="images/5.jpg" />
    </li>
    <li>
      <span class="bg5">这是第六个</span>
      <img src="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)

}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

(0)

相关推荐

  • 纯js实现手风琴效果代码

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下 结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&

  • javascript手风琴下拉菜单实现代码

    手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

  • Angular.js与Bootstrap相结合实现手风琴菜单代码

    标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式. 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码.接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page

  • 原生js实现手风琴功能(支持横纵向调用)

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴-支持横纵向调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&q

  • 原生js做的手风琴效果的导航菜单

    做好的手风琴效果如下,具体看代码:  html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • js实现简单的手风琴效果

    效果图: 图(1)初始图 图(2)点击展开效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;list-s

  • js实现可折叠展开的手风琴菜单效果

    本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • js实现带三角符的手风琴效果

    效果图: 图(1)初始图 图(2)点击展开图 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #list{ width: 240px; border: 1px solid #666;

  • 原生JS实现垂直手风琴效果

    效果如下: 图 (1) 展开前 图 (2) 展开后 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .panel { width: 555px; height: auto; background-color: #333333; margin: 50

随机推荐