纯js代码实现手风琴特效

高洛峰
Lepaskan: 2016-10-12 09:29:33
asal
1511 orang telah melayarinya

我知道现在大多数前端开发人员都在使用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>
Salin selepas log masuk

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;

}
Salin selepas log masuk

下面是重头戏啦,请欣赏原生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];
   }
}


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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan