纯js实现手风琴效果代码


Posted in Javascript onApril 17, 2020

我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢?

但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果。

 HTML代码如下 

结构非常简单就5个li盒子,js代码会渲染图片上去

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<div id="box">
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>
</body>
</html>

CSS代码如下:

宽高请自行设置,我之前做的这个项目图片是1226*446的图片,所以宽度和高度是按照当时做项目的时候设置的,如果你想放置其他尺寸的图片请按照实际情况设施...

ul {
 list-style: none
}

* {
 margin: 0;
 padding: 0;
}

div {
 width: 1150px;
 height: 400px;
 margin: 50px auto;
 border: 1px solid red;
 overflow: hidden;
}

div li {
 width: 240px;
 height: 400px;
 float: left;
 /*background-image: url(images/1.jpg);*/
}

div ul {
 width: 1300px;

}

下面是重头戏啦,请欣赏原生js(相信很多人都快忘了原生js吧)

//找人
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;

//循环遍历 lis 绑定背景图

for (var i = 0; i < lis.length; i++) {
 lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

 //给每一个li注册鼠标经过事件 鼠标经过后要排他

 lis[i].onmouseover = function () {

  //干掉所有人 让所有人的宽度 渐渐地 变为100

  for (var j = 0; j < lis.length; j++) {
   animate(lis[j], {"width": 100});
  }

  //留下我自己 让我的宽度 渐渐地 变为800

  animate(this, {"width": 800});
 };
}

//鼠标离开box 所有的li宽度 渐渐地 变为240

box.onmouseout = function () {
 for (var i = 0; i < lis.length; i++) {
  animate(lis[i], {"width": 240});
 }
};

//jQuery中有animate动画函数,下面是实现的原理,虽然没有jQ的强大,但是基本的效果实现还是没有问题的

function animate(obj, json) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {

  //先假设 这一次执行完 所有的属性都到达目标了

  var flag = true;
  for (var k in json) {
   var leader = parseInt(getStyle(obj, k)) || 0;
   var target = json[k];
   var step = (target - leader) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   leader = leader + step;
   obj.style[k] = leader + "px";
   //if (leader === target) {
   // clearInterval(obj.timer);
   //}
   console.log("代码还在运行");
   if (leader != target) {

    flag = false;//告诉标记 当前这个属性还没到达

   }
  }

  //如果此时仍然为true 就说明真的都到达了

  if (flag) {
   clearInterval(obj.timer);
  }
 }, 15);
}

//全部属性都到达目标值才能清空

function getStyle(obj, attr) {
 if (window.getComputedStyle) {
  return window.getComputedStyle(obj, null)[attr];
 } else {
  return obj.currentStyle[attr];
 }
}

上面就是所有的代码,你可以找五张图片试一试。

实际开发中效率还是最重要的,因为现在浏览器的性能已经非常好了,所以jQ的有些缺点完全可以忽略不计啦,并且jQ的兼容性真的是不错的,能节省开发人员很多的时间和精力,我也很支持在工作项目中用jQ来开发,可是作为一个真正的前端技术人员,你要时刻了解底层代码的实现,这样随着科技的发展,你也不会落于人后。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
JavaScript如何操作css
Oct 24 Javascript
JavaScript 继承详解(六)
Oct 11 #Javascript
JavaScript 继承详解(五)
Oct 11 #Javascript
Javascript动画效果(4)
Oct 11 #Javascript
JavaScript中const、var和let区别浅析
Oct 11 #Javascript
对javascript继承的理解
Oct 11 #Javascript
Javascript动画效果(3)
Oct 11 #Javascript
JavaScript实现自动切换图片代码
Oct 11 #Javascript
You might like
编写PHP的安全策略
2006/10/09 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
List Installed Software Features
2007/06/11 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
React组件生命周期详解
2017/07/03 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python线程指南详细介绍
2017/01/05 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
外企测试工程师面试题
2015/02/01 面试题
2014年教师节座谈会发言稿
2014/09/10 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
sql字段解析器的实现示例
2021/06/23 SQL Server