js运动实例-多图片从中心放大缩小

最新推荐文章于 2022-03-19 16:26:40 发布

della_uii

最新推荐文章于 2022-03-19 16:26:40 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript 文章标签： js运动框架多图片从中心放大缩小

本文链接：https://blog.csdn.net/della_ui/article/details/53123410

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

多图片从中心放大缩小实现的过程分四步：

第一步：布局，各个小盒子相对于外面的大盒子定位（这里为简便，以li块代替图片）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,ul,li{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                width: 330px;
                margin: 50px auto 0;
                position: relative;
            }
            li{
                width: 100px;
                height: 100px;
                background: olivedrab;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("ul1");
                var aLi=oUl.getElementsByTagName('li');

                for (var i=0; i<aLi.length; i++) {

                    aLi[i].style.position='absolute';
                    aLi[i].style.left=(i%3)*110+10+'px';
                    aLi[i].style.top=Math.floor(i/3)*110+10+'px';

                }
            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

第二步：声明一个数组，用于存储各个li块的原始left值和top值

<script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById("ul1");
        var aLi=oUl.getElementsByTagName('li');
        var arr=[];

        for (var i=0; i<aLi.length; i++) {

            aLi[i].style.position='absolute';
            aLi[i].style.left=(i%3)*110+10+'px';
            aLi[i].style.top=Math.floor(i/3)*110+10+'px';

            arr.push({
                left:aLi[i].offsetLeft,
                top:aLi[i].offsetTop
            })

        }
    }
</script>

第三步：加入鼠标移入和移出函数

<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById("ul1");
        var aLi=oUl.getElementsByTagName('li');
        var arr=[];

        for (var i=0; i<aLi.length; i++) {
            aLi[i].index=i;

            aLi[i].style.position='absolute';
            aLi[i].style.left=(i%3)*110+10+'px';
            aLi[i].style.top=Math.floor(i/3)*110+10+'px';

            arr.push({
                left:aLi[i].offsetLeft,
                top:aLi[i].offsetTop
            })

            aLi[i].onmouseover=function(){
                startMove(this,{
                    width:140,
                    height:140,
                    left:arr[this.index].left-20,
                    top:arr[this.index].top-20
                })
            }

            aLi[i].onmouseout=function(){
                startMove(this,{
                    width:100,
                    height:100,
                    left:arr[this.index].left,
                    top:arr[this.index].top
                })
            }

        }
    }
</script>

到这里已经基本实现了各个li块的从中心放大缩小，当鼠标移入时改变当前li块的背景颜色，可以发现，此处存在层级问题，即后面li块的层级比前面的高，因此会遮挡从中心放大的li块。
解决：声明一个变量，使鼠标移入的li块的层级增加，即第四步

第四步：解决层级问题

最终代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,ul,li{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                width: 330px;
                margin: 50px auto 0;
                position: relative;
            }
            li{
                width: 100px;
                height: 100px;
                background: olivedrab;
            }
        </style>
        <script src="js/move.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("ul1");
                var aLi=oUl.getElementsByTagName('li');
                var arr=[];
                var zindex=1;

                for (var i=0; i<aLi.length; i++) {
                    aLi[i].index=i;

                    aLi[i].style.position='absolute';
                    aLi[i].style.left=(i%3)*110+10+'px';
                    aLi[i].style.top=Math.floor(i/3)*110+10+'px';

                    arr.push({
                        left:aLi[i].offsetLeft,
                        top:aLi[i].offsetTop
                    })

                    aLi[i].onmouseover=function(){
                        this.style.background='#333';
                        this.style.zIndex=zindex++;
                        startMove(this,{
                            width:140,
                            height:140,
                            left:arr[this.index].left-20,
                            top:arr[this.index].top-20
                        })
                    }

                    aLi[i].onmouseout=function(){
                        this.style.background='olivedrab';
                        startMove(this,{
                            width:100,
                            height:100,
                            left:arr[this.index].left,
                            top:arr[this.index].top
                        })
                    }

                }
            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

注意：本例引入了一个move.js文件，即上一篇博客“运动框架加入缓冲”中的startMove函数。

move.js:

function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;

    obj.iTimer = setInterval(function() {

        var iBtn = true;

        for ( var attr in json ) {

            var iTarget = json[attr];

            if (attr == 'opacity') {
                iCur = Math.round(css( obj, 'opacity' ) * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }

            iSpeed = ( iTarget - iCur ) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            if (iCur != iTarget) {
                iBtn = false;
                if (attr == 'opacity') {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }

        }

        if (iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }

    }, 30);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

della_uii

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js运动实例-多图片从中心放大缩小

多图片展开收缩实现的过程分四步：第一步：布局，各个小盒子相对于外面的大盒子定位<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ m
复制链接

扫一扫

专栏目录