纯js实现手风琴效果


Posted in Javascript onApril 17, 2020

本文分享了纯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程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
前端jquery部分很精彩
May 03 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
js禁止表单重复提交
Aug 29 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 #Javascript
Angular 根据 service 的状态更新 directive
Apr 03 #Javascript
jQuery中的Deferred和promise 的区别
Apr 03 #Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
jQuery qrcode生成二维码的方法
Apr 03 #Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 #Javascript
AngularJs 60分钟入门基础教程
Apr 03 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
thinkphp缓存技术详解
2014/12/09 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
Js获取事件对象代码
2010/08/05 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
python实现银行账户系统
2021/02/22 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
村委会贫困证明
2014/01/14 职场文书
追悼会子女答谢词
2014/01/28 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
安全大检查反思材料
2014/01/31 职场文书
清明节随笔
2015/08/15 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书