多图片展开收缩实例

运用运动框架进行多图片展开收缩的实例展示

在展示时未插入图片用ul li 来代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图片的展开收缩</title>
    <style type="text/css">
    body {margin:0;}
    #ul1 {margin:0;padding: 0;width: 330px;margin:100px auto 0;position: relative;}
    li {width: 100px;height: 100px;background: red;float: left;list-style:none;margin:10px 0 0 10px;}
    </style>
    <script type="text/javascript" src="move.js"></script>
    <script type="text/javascript">
    /*元素居中放大：除了要改变元素的宽高以外，还要改变元素定位（left top）
    因为在页面布局时点是根据元素的左上角即（left,top）来计算的
    如果图片放大一倍则位移为放大宽高的一半
    通过程序将浮动的图片转化为定位 不需要通过css一个个进行设定
    */ 

    window.onload = function() {
        //在转换布局的，相对用户眼睛的位置的保持不变
        //offsetLeft[Top]当前元素到定位负极的距离 到当前元素的offsetParent的距离
        /*
        offsetLeft[Top]也存在兼容性问题：
        IE7：
        如果父级有定位
         如果自己有定位，那么就是到定位父级的距离
         如果自己没有定位，那么offsetLeft是到body的距离
        如果父级没有定位
         offsetParent->body
         offsetLeft->html
         */
        var oUl = document.getElementById('ul1');
        var aLi = document.getElementsByTagName('li');
        var arr = [];
        var zIndex = 1;//提高层级

        for (var i = 0; i < aLi.length; i++) {
            
            arr.push({
                left:aLi[i].offsetLeft,
                top:aLi[i].offsetTop
            })//防止移入后再次移入时 值会再次改变
        }

        for (var i = 0; i < aLi.length; i++) {
            //在利用js设置css样式的时候:在同一个代码块中，有些css样式的设置的权限要高于其他样式
            // aLi[i].style.left = aLi[i].offsetLeft+'px';
            // aLi[i].style.top = aLi[i].offsetTop+'px';
            aLi[i].index = i;
            
            aLi[i].style.left = arr[i].left+'px';
            aLi[i].style.top = arr[i].top+'px';

            aLi[i].style.position = 'absolute';//会被优先解析 先定位后获值 
            //由于left值和margin值不会覆盖 会累加计算 故需要将margin值清零
            aLi[i].style.margin = '0px';


            aLi[i].onmouseover = function(){

                this.style.zIndex = zIndex++;

                startMove(this,
                    {
                        height:200,
                        width:200,
                        left:arr[this.index].left-50,
                        top:arr[this.index].top-50
                    });
            }

            aLi[i].onmouseout = function(){//移除回到原来的状态
                startMove(this,
                    {
                        height:100,
                        width: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>

引入的运动框架代码

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];
    }
}

多图片展开收缩实例

运用运动框架进行多图片展开收缩的实例展示

做一块西瓜太郎

引用和评论

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合