切入效果实现

最新推荐文章于 2020-08-24 09:52:07 发布

爱编程的兔子

最新推荐文章于 2020-08-24 09:52:07 发布

阅读量406

点赞数

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

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

版权

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

7 篇文章 0 订阅

订阅专栏

实现思路

切入效果，类似于PPT，这个效果比较简单，实现思路：此处以从底部切入为例，内容距离上层标签的top为其高度，然后令top的值为0即可。
下面是实现代码，复制即可运行。

代码

<!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>
<style>
*{
    padding: 0;
    margin: 0;
}
html{
    font-size: 100px;
}
body{
    background: #4359aa;
    padding: 0.5rem 0;
}
.entry-img{
    position: relative;
    height: 1.42rem;
}
.entry-img span{
    position: absolute;
    display: block;
    left: 0;
    left: 50%;
    width: 2.42rem;
    height: 1.42rem;
    background: url(images/img.jpg) no-repeat center;
    background-size: 100% 100%;
    visibility: hidden;
    margin-left: -1.21rem;
}
</style>
</head>
<body>
<div class="entry-img"><span></span></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(){
        cutOver($(".entry-img"),400);
    },600);
})

/*
 * 功能：切入效果
 * param1：切入部分
 * param2：切入方向
 * param3：切入执行时长
 * */
function cutOver(param1,param2){
    var paramChild, paramChildHeight;

    paramChild = param1.children();
    paramChildHeight = paramChild.height();

    param1.css({
        "overflow":"hidden"
    });
    paramChild.css({
        "top": paramChildHeight,
        "visibility": "visible"
    });
    paramChild.animate(
        {
            "top":0
        },
        {
            duration:param2,
            easing:"swing"
        }
    );
}
</script>
<body>
</html>

效果

这里写图片描述

爱编程的兔子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
切入效果实现

实现思路切入效果，类似于PPT，这个效果比较简单，实现思路：此处以从底部切入为例，内容距离上层标签的top为其高度，然后令top的值为0即可。下面是实现代码，复制即可运行。代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial
复制链接

扫一扫