纯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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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
分享一个Laravel好用的Cache宏
2015/03/02 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
vuejs指令详解
2017/02/07 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
python操作gitlab API过程解析
2019/12/27 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python实现感知机模型的示例
2020/09/30 Python
Python self用法详解
2020/11/28 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
高中班长自我鉴定
2013/12/20 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
项目采购员岗位职责
2014/04/15 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python