纯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 相关文章推荐
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
vuex管理状态仓库使用详解
Jul 29 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
php获取QQ头像并显示的方法
2014/12/23 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
python中元类用法实例
2014/10/10 Python
详解python中asyncio模块
2018/03/03 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
师范学院教师自荐书
2014/01/31 职场文书
公司开业庆典主持词
2014/03/21 职场文书
委托书的写法
2014/08/30 职场文书
法人授权委托书范本
2014/09/17 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
大雁塔英文导游词
2015/02/10 职场文书
大学生个人总结范文
2015/02/15 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js