Heim > Artikel > Web-Frontend > 纯js代码实现手风琴特效

纯js代码实现手风琴特效

高洛峰Original: 2016-10-12 09:29:331458Durchsuche

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

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

HTML代码如下

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

<!DOCTYPE html>
<html>
<head>
    <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[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

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

lis[i].onmouseover = function () {

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

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

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

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

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

box.onmouseout = function () {
for (var i = 0; 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];
}
}

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript强化教程——BootstrapNächster Artikel：谈谈JS中的函数节流

In Verbindung stehende Artikel

Mehr sehen