zoukankan      html  css  js  c++  java
  • 轮播总结

    轮播总结

    一.二帧式布局实现

    运用二块画布实现轮播动画

    1)jq实现的滑动原理

    a.初始化

    第一帧显示第一张图;
    第二帧显示第二张图;

    b.向左滑动时

    先向左左动画;
    动画结束后,将第一帧删除;
    在第二帧后添加新的帧,并将新帧的图片换成,图片数组中要显示的下一个图片

    var _that = this;
                this.data.picNo++;
                if(this.data.picNo==3){
                    this.data.picNo=0;
                }else if(this.data.picNo==4){
                    this.data.picNo=1;
                }
                $(this.data.frameParent).find("li:first-child").animate({
                    marginLeft:"-300px"
                },1000,function(){
                    var temp=$(this).clone();
                    $(this).remove();
                    temp.css({marginLeft:"0"}).children().attr("src",_that.data.srcArr[_that.data.picNo]);
                    //temp.css({marginLeft:"0"}).children().attr("data-src",_that.data.srcArr[_that.data.picNo]);
                    $(_that.data.frameParent).append(temp);
                });
    
    c.向右滑动时

    先删除当前位置的第二帧;
    在第一帧前添加一帧,并将新帧的图片换成,图片数组中要显示的下一个图片;
    最后向右做动画

    var _that = this;
    this.data.picNo--;
    if(this.data.picNo<1){
                    this.data.picNo=3;
                }
    
                var _node = $(this.data.frameParent).find("li:last-child");
                var temp=_node.clone();
                _node.remove();
                temp.css({marginLeft:"-300px"}).children().attr("src",_that.data.srcArr[_that.data.picNo-1]);
                //temp.css({marginLeft:"-300px"}).children().attr("data-src",_that.data.srcArr[_that.data.picNo-1]);
                $(_that.data.frameParent).prepend(temp);
                $(this.data.frameParent).find("li:first-child").animate({
                    marginLeft:"0"
                },1000);
    

    2)regular实现原理(固定二帧)

    根据方向,维持二个数组:当前显示数组,即将显示数组;
    点击事件先获取第二帧数据;对第一帧做动画;
    第一帧动画完了,显示第二帧,然后做第二帧动画;
    第二帧动画结束后,将当前的数据变更为第二帧的数据。

    二.动画/h3>

    1.jq滑动动画(animate)

    $(this.data.frameParent).find("li:first-child").animate({
                    marginLeft:"0"
                },1000);
    

    2.regular内置了animate动画

    3.regular动画

    regular动画文档animation
  • 相关阅读:
    计算机网络基础
    计算机网络之应用层
    计算机网络之传输层
    计算机网络之网络层
    计算机通信之数据链路层
    fastjson =< 1.2.47 反序列化漏洞浅析
    你没有见过的加密
    CTF MD5之守株待兔,你需要找到和系统锁匹配的钥匙
    Redis 4.x 5.x 未授权访问
    redis安装
  • 原文地址:https://www.cnblogs.com/jingwhale/p/6808337.html
Copyright © 2011-2022 走看看