三十七、jQuery多动轮播动画混叠效果

其他 2018-12-16 14:10:15 阅读次数: 0

利用枚举对象封装方法，通过参数传递建立不同的动画模型并调用执行对应动画；

主要是为了演示如何对动画混叠进行封装

一、搭建整体模型

1.封装层级排序方法

//封装层级排序方法
sortimg:function(){
    $(".ulinfo li").each(function(index){
        $(this).css({"zIndex":$(".ulinfo li").length-index-1});
    })
}

2.封装淡入淡出前后切换效果

原理：利用自定义动画以及层级关系，当最高层的图片淡出并将其层级设置为0，第二张图片淡入；

fadeIn() fadeOut()  淡入淡出  参数(时间 回调函数)

//封装淡入淡出切换效果
bannerimg:function(){
    $(".ulinfo li").each(function(){
        //叠加zIndex
        $(this).css("zIndex",parseInt($(this).css("zIndex"))+1);
        //判断层级
        if($(this).css("zIndex")==$(".ulinfo li").length){
            $(this).fadeOut(1000,function(){
                $(this).css("zIndex",0);
            })
        }else if($(this).css("zIndex")==$(".ulinfo li").length-1){
            $(this).fadeIn(1000);
        }
    })
}

 

2.封装动画模型：动态创建dom元素，将整张图片按照不同方式分割变换，并通过传递参数(图片路径)将其设置为背景图片，每分割的每一部分通过背景图片定位来控制，令每部分恰好拼成完整的图片；

原理：对动画模型方法传参(图片路径,索引值)，根据所传的参数，调用不同的动画模型

注意：每个动画模型根据所传参数对应每个轮播动画，2者都是利用switch (){case : break;} 语句封装 

 

//封装动画模型
domcreate:function(src,res){
    switch (res){
        case 1: //左右奇偶拉开
            var tiao,width=600,height=300;
            var tiao_height=20;
            tiao=height/tiao_height;
            for(var i=0;i<tiao;i++){
                var ceng=$("<div></div>");
                ceng.addClass("ceng");
                ceng.css({
                    border:"1px solid red",
                    width:width+"px",
                    height:tiao_height+"px",
                    position:"absolute",
                    left:"0px",
                    top:(i*tiao_height)+"px",
                    zIndex:10,
                    backgroundImage:"url("+src+")",
                    backgroundSize:"600px 300px",
                    backgroundPosition:"0px "+ (-i*tiao_height)+"px"
                });
                $(".block").append(ceng);
            }
            break;
        case 2: break;
        case 3: break;
        case 4: break;
    }
},

 

3.封装轮播动画，同样需要传递参数，控制动画模型对应的轮播动画，由轮播动画对创建的动画模型的每部分进行操作，将动画与淡入淡出动画相结合，形成不同的视觉假象；

利用switch(){case :break;} 封装很多条不同的动画效果

注意：在每一次动画执行完成之后要移除动态创建的dom元素,不然不停创建dom元素会导致浏览器卡死

 

//封装轮播动画
shiftimg:function(res){
    switch (res){
        case 1:
            $(".ceng").each(function(index){
               if(index%2==0){
                   $(this).animate({
                       left:(-600)+"px"
                   },1000,"linear",function(){
                       $(this).remove();
                   })
               }else{
                   $(this).animate({
                       left:(600)+"px"
                   },1000,"linear",function(){
                       $(this).remove();
                   })
               }
            });
            break;
        case 2:
            break;
    }
}

 

4.完善动画封装模型

由于这个动画模型的轮播动画都需借助淡入淡出动画完成，所以在淡入淡出动画中调用动画模型及轮播动画方法，并通过Math.random()随机数生成控制传入参数进而控制轮播动画随机播放；

Math.ceil()向上取整

Math.floor()向下取整

 

//随机数控制轮播动画
var res=Math.ceil(Math.random()*2);//2对应的case 数
Animate.domcreate(src,res);
Animate.shiftimg(res);

 

二、完整代码：这里以四个为例，当然还可以通过case添加更多个模型方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        .block{
            width: 600px;
            height: 300px;
            border: 1px solid black;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }
        .ulinfo{
            position: relative;
        }
        .ulinfo li{
            list-style: none;
            width: 600px;
            height: 300px;
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.51);
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
    <script src="js/jquery-3.0.0.js"></script>
    <script>
        var time;
        $(function(){
            Animate.sortimg();
            $(".ulinfo li").eq(0).show(); //默认第一张显示
            time=setInterval("Animate.bannerimg()",2000);
            //进入离开事件
            $(".block").mouseenter(function(){
                clearInterval(time);
            }).mouseleave(function(){
                time=setInterval("Animate.bannerimg()",2000);
            });
        });
        var Animate={
            //封装层级排序方法
            sortimg:function(){
                $(".ulinfo li").each(function(index){
                    $(this).css({"zIndex":$(".ulinfo li").length-index-1});
                })
            },
            //封装淡入淡出切换效果
            bannerimg:function(){
                var src=null;
                $(".ulinfo li").each(function(){
                    //叠加zIndex
                    $(this).css("zIndex",parseInt($(this).css("zIndex"))+1);
                    //判断层级
                    if($(this).css("zIndex")==$(".ulinfo li").length){
                        src=$(this).children("img").attr("src");
                        $(this).fadeOut(1000,function(){
                            $(this).css("zIndex",0);
                        })
                    }else if($(this).css("zIndex")==$(".ulinfo li").length-1){
                        $(this).fadeIn(1000);
                    }
                });

                //随机数控制轮播动画
                var res=Math.ceil(Math.random()*4);
                Animate.domcreate(src,res);
                Animate.shiftimg(res);
            },
            //封装动画模型
            domcreate:function(src,res){
                switch (res){
                    case 1: //左右奇偶拉开
                        var tiao,width=600,height=300;
                        var tiao_height=20;
                        tiao=height/tiao_height;
                        for(var i=0;i<tiao;i++){
                            var ceng=$("<div></div>");
                            ceng.addClass("ceng");
                            ceng.css({
                                /*border:"1px solid red",*/
                                width:width+"px",
                                height:tiao_height+"px",
                                position:"absolute",
                                left:"0px",
                                top:(i*tiao_height)+"px",
                                zIndex:10,
                                backgroundImage:"url("+src+")",
                                backgroundSize:"600px 300px",
                                backgroundPosition:"0px "+ (-i*tiao_height)+"px"
                            });
                            $(".block").append(ceng);
                        }
                        break;
                    case 2:  //百叶窗效果
                        var tiao,width=600,height=300;
                        var tiao_width=30;
                        tiao=width/tiao_width;
                        for(var i=0;i<tiao;i++){
                            var ceng=$("<div></div>");
                            ceng.addClass("ceng");
                            ceng.css({
                                /*border:"1px solid red",*/
                                width:tiao_width+"px",
                                height:height+"px",
                                position:"absolute",
                                top:"0px",
                                left:(i*tiao_width)+"px",
                                zIndex:10,
                                backgroundImage:"url("+src+")",
                                backgroundSize:"600px 300px",
                                backgroundPosition:(-i*tiao_width)+"px 0px"
                            });
                            $(".block").append(ceng);
                        }
                        break;
                    case 3:
                        var tiao,hang,width=600,height=300;
                        var tiao_width=60,tiao_height=60;
                        tiao=width/tiao_width;
                        hang=height/tiao_height;
                        for(var i=0;i<tiao*hang;i++){
                            var ceng=$("<div></div>");
                            ceng.addClass("ceng");
                            ceng.css({
                                border:"1px solid rgba(255, 255, 255, 0.5)",
                                width:tiao_width+"px",
                                height:tiao_height+"px",
                                position:"absolute",
                                top:(Math.floor(i/tiao)*tiao_height)+"px", //根据列确定行
                                left:(i%tiao*tiao_width)+"px",
                                zIndex:10,
                                backgroundImage:"url("+src+")",
                                backgroundSize:"600px 300px",
                                backgroundPosition:(-i%tiao*tiao_width)+"px "+(-Math.floor(i/tiao)*tiao_height)+"px"
                            });
                            $(".block").append(ceng);
                        }
                        break;
                    case 4:
                        var tiao,width=600,height=300;
                        var tiao_width=10;
                        tiao=width/tiao_width;
                        for(var i=0;i<tiao;i++){
                            var ceng=$("<div></div>");
                            ceng.addClass("ceng");
                            ceng.css({
                                border:"1px solid rgba(255, 255, 255, 0.5)",
                                width:tiao_width+"px",
                                height:height+"px",
                                position:"absolute",
                                top:"0px",
                                left:(i*tiao_width)+"px",
                                zIndex:10,
                                backgroundImage:"url("+src+")",
                                backgroundSize:"600px 300px",
                                backgroundPosition:(-i*tiao_width)+"px 0px"
                            });
                            $(".block").append(ceng);
                        }
                        break;
                }
            },
            //封装轮播动画
            shiftimg:function(res){
                switch (res){
                    case 1:
                        $(".ceng").each(function(index){
                           if(index%2==0){
                               $(this).animate({
                                   left:(-600)+"px"
                               },1000,"linear",function(){
                                   $(this).remove();
                               })
                           }else{
                               $(this).animate({
                                   left:(600)+"px"
                               },1000,"linear",function(){
                                   $(this).remove();
                               })
                           }
                        });
                        break;
                    case 2://百叶窗效果
                        $(".ceng").each(function(){
                            //改变Left width值令每条向其中轴线收缩并消失
                            $(this).animate({
                                width:"0px",
                                left:parseInt($(this).css("left"))+parseInt($(this).css("width"))/2+"px"
                            },1000,"linear",function(){
                                $(this).remove();
                            })
                        });
                        break;
                    case 3:
                        $(".ceng").each(function(){
                            $(this).animate({
                                //改变top left opacity
                                top:(Math.sin(Math.random()*Math.PI*2)*300)+"px",
                                left:(Math.cos(Math.random()*Math.PI)*600)+"px",
                                opacity:"0"
                            },1000,"linear",function(){
                                $(this).remove();
                            })
                        });
                        break;
                    case 4:
                        $(".ceng").each(function(index){
                            $(this).animate({
                                //改变top height opacity
                                top:(Math.sin(index*60)*500)+"px",
                                height:(parseInt($(this).css("height"))-2*(Math.sin(index*60)*500))+"px",
                                opacity:"0"
                            },1000,"linear",function(){
                                $(this).remove();
                            })
                        });
                        break;
                }
            }
        }
    </script>
</head>
<body>
<div class="block">
    <ul class="ulinfo">
        <li><img src="image/demo1.jpg"></li>
        <li><img src="image/demo2.jpg"></li>
        <li><img src="image/demo3.jpg"></li>
        <li><img src="image/demo4.jpg"></li>
        <li><img src="image/demo5.jpg"></li>
        <li><img src="image/demo6.jpg"></li>
    </ul>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_40976555/article/details/80827319
今日推荐
零基础入门鸿蒙开发 HarmonyOS NEXT星河版开发学习
豆包MarsCode帮我2小时完成Go语言系统从开发、测试到部署全流程最佳实践，云IDE迁移PHP企业级项目最佳实践
内幕！smardaten无代码平台全方位测评，这些细节你绝对想不到！
idea安装及激活配置流程---2024旗舰版(需激活码)
Elastic 创始人：热爱开源，希望合作 OSI 创建新许可证
工业互联网标识解析体系开放开源下载服务中心发布
IDEA取消自动选择光标所在行
828华为云征文 | 使用Flexus X实例搭建Dubbo-Admin服务
Programmer&AI—AI辅助编程学习指南
【Linux】虚拟机安装 openEuler 24.03 X86_64
o1 发布后 Sam Altman 最新访谈：AI 发展不仅没有放缓，而且我们对未来几年已经胜券在握
AI芯片国产化率100%！运营商最大单集群智算中心投产
周排行
【后端】 Spring Cloud 服务间调用
Git 学习教程
Salesforce集成(三). 获取数据02_获取Object和Field信息
Oracle执行计划的稳定（使用MANUAL类型的SQL PROFILE）
js跨域请求之jsonp原理和运用
ios -解决view遮挡按钮问题
【PAT天梯赛】L2-003 月饼 （25 分)（贪心思想）
hive 存储格式的生产应用
【Python实践-6】将不规范的英文名字，变为首字母大写，其他小写的规范名字
容器学习点点滴滴（二）
每日归档
更多
2024-10-03(2)
2024-10-02(60)
2024-10-01(0)
2024-09-30(0)
2024-09-29(0)
2024-09-28(4)
2024-09-27(60)
2024-09-26(0)
2024-09-25(0)
2024-09-24(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022