首页 / JAVASCRIPT / 纯js实现手风琴效果代码
纯js实现手风琴效果代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了纯js实现手风琴效果代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2910字，纯文字阅读大概需要5分钟。
内容图文
我知道现在大多数前端开发人员都在使用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来开发，可是作为一个真正的前端技术人员，你要时刻了解底层代码的实现，这样随着科技的发展，你也不会落于人后。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的纯js实现手风琴效果代码全部内容，希望文章能够帮你解决纯js实现手风琴效果代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。