多图片展开收缩实例

archieyang 发布于2019-08-29 11:22 / 891人阅读

摘要：运用运动框架进行多图片展开收缩的实例展示在展示时未插入图片用来代替多图片的展开收缩元素居中放大除了要改变元素的宽高以外，还要改变元素定位因为在页面布局时点是根据元素的左上角即来计算的如果图片放大一倍则位移为放大宽高的一半通过程序将浮动的

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

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




    
    多图片的展开收缩

引入的运动框架代码

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

GPU云服务器云服务器微信打不开图片启用多实例多线程实例多进程编程实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111601.html

多图片展开收缩实例

摘要：运用运动框架进行多图片展开收缩的实例展示在展示时未插入图片用来代替多图片的展开收缩元素居中放大除了要改变元素的宽高以外，还要改变元素定位因为在页面布局时点是根据元素的左上角即来计算的如果图片放大一倍则位移为放大宽高的一半通过程序将浮动的运用运动框架进行多图片展开收缩的实例展示在展示时未插入图片用ul li 来代替多图片的展开收缩 body...

qpwoeiru96 2019-08-20 11:18 评论0 收藏0
多图片展开收缩实例

摘要：运用运动框架进行多图片展开收缩的实例展示在展示时未插入图片用来代替多图片的展开收缩元素居中放大除了要改变元素的宽高以外，还要改变元素定位因为在页面布局时点是根据元素的左上角即来计算的如果图片放大一倍则位移为放大宽高的一半通过程序将浮动的运用运动框架进行多图片展开收缩的实例展示在展示时未插入图片用ul li 来代替多图片的展开收缩 body...

caikeal 2019-08-01 15:45 评论0 收藏0
flex布局的元素如何分配容器的剩余空间

摘要：三个元素会从左往右占据父元素的空间这很显然。左右侧边栏的宽度都是，中间元素的宽度将会占据元素的剩余宽度。同样会导致父元素有部分剩余空间没有分配。自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技...

ethernet 2019-08-30 15:44 评论0 收藏0
Android 2019最新面试实战总结

摘要：内存泄漏当应用内部不再需要某个实例后，但是这个对象却仍然被引用，这个情况就叫做内存泄露。安卓虚拟机为每一个应用分配一定的内存空间，当内存泄露到达一定的程度就会造成内存溢出。点击登录跳转页面中所有操作都与用户密切相关，是 Android: 今日头条屏幕适配的原理？ 1：首先计算出 density，计算公式：当前设备屏幕总宽度（单位为像素）/ 设计图总宽度（单位为 dp) = densit...

Caicloud 2019-08-16 16:12 评论0 收藏0