挥鞭式进入效果实现

最新推荐文章于 2022-12-31 17:50:11 发布

爱编程的兔子

最新推荐文章于 2022-12-31 17:50:11 发布

阅读量1.1k

点赞数

分类专栏： css3+javascript实现各种效果文章标签：动画 css3 javascript 移动开发

本文链接：https://blog.csdn.net/wjnf012/article/details/70072061

版权

css3+javascript实现各种效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现思路

挥鞭式进入效果类似于PPT中的动画效果挥鞭式效果，主要思路是：首先会显示四个大小不同的文字，当第一个文字达到最大时，第五个文字进入，以此类推，按照一定时间，第一个文字会减小到设定的大小。
照旧，上代码：

实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="cache-control" content="no-cache">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<title>挥鞭式进入效果</title>
<link rel="stylesheet" href="scripts/swiper/css/swiper.min.css" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/animate.css" rel="stylesheet" />
<link href="css/ui-font.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<style>
*{
    padding: 0;
    margin: 0;
}
html{
    font-size: 100px;
}
body{
    background: #4359aa;
    padding: 0.5rem 0;
}
.text{
    position: relative;
    font-size: 0.22rem;
    color: #ffffff;
    line-height: 0.33rem;
    text-align: center;
    font-style: italic;
    letter-spacing: 0.01rem;
    visibility: hidden;
    padding: 0.13rem 0;
}
</style>
</head>
<body>
<div class="text">财富大门期待您的开启！</div>
<script type="text/javascript" src="../plugins/lib/jquery/jquery-2.1.4.min.js" ></script>   
<script type="text/javascript">
$(function(){
    var whiplashTime = setTimeout(function(){
        whiplash($(".text"),200,4);
    },600);
})

/*
 * 功能：挥鞭式进入效果
 * param1：进入部分
 * param2：效果执行时长
 * param3: 初始化时显示的文字个数
 * */
function whiplash(param1,param2,param3){
    var paramText,
        paramTextStr = '',
        durTime=0;
    paramText = param1.text();

    for(var i=0; i<paramText.length; i++){
        paramTextStr += '<span>' + paramText[i] + '</span>';
    }
    paramTextStr = '<div>' + paramTextStr + '</div>';
    param1.html(paramTextStr);

    param1.find("span").css({
        "font-size":"0",
        "visibility": "hidden"
    });
    for (var i=0; i<param3; i++) {
        param1.find("span:eq("+i+")").css({"visibility": "visible"});
    }
    var setTime = setTimeout(function(){
        param1.find("span").css({"visibility": "visible"});
    },param2*1.5);

    param1.find("span").each(function(index,item){
        durTime += param2;
        param1.find("span:eq("+index+")").animate(
            {
                "font-size":"0.3rem"
            },
            {
                duration:durTime,
                easing:"swing",
            }
        );
        param1.find("span:eq("+index+")").animate(
            {
                "font-size":"0.23rem"
            },
            {
                duration:durTime,
                easing:"swing"
            }
        );
    });
}   
</script>
<body>
</html>