切入效果实现

来源：互联网发布：北京值得去的地方知乎编辑：程序博客网时间：2024/06/15 22:33

实现思路

切入效果，类似于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