擦除效果实现

编程入门行业动态更新时间:2024-10-26 07:32:49

擦除效果实现

实现思路

项目中要实现一个动画效果，类似于PPT中的擦除效果，其实每个动画并不难实现，关键是要理解动画执行的逻辑，只要理解逻辑了，问题就迎刃而解。首先说下擦除效果的逻辑吧。
擦除效果就是高度从零到设置值的变化，也是宽度从零到设置值的变化，为什么这样说呢，是因为擦除效果有四个方向——上下左右，为了更好的理解，下面是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>
<style>
*{padding: 0;margin: 0;
}
body{padding: 80px 0;background: rgba(29,35,77,1);
}
li{list-style: none;
}
.int-entry-pgs-ads ul{width: 100%;padding: 15px 0;visibility: hidden;
}
.int-entry-pgs-ads li{font-size: 14px;color: #c7cdf6;text-align: center;line-height: 24px;padding: 10px 0;
}
</style>
</head>
<body>
<div class="int-entry-pgs-ads"><ul><li>晓出净慈寺送林子方</li><li>杨万里</li><li>毕竟西湖六月中，风光不与四时同。</li><li>接天莲叶无穷碧，映日荷花别样红。</li></ul>
</div>
<script type="text/javascript" src="../plugins/lib/jquery/jquery-2.1.4.js" ></script>
<script>
$(function(){var time = 2400; // 设置擦除效果执行时长wipeAnimate($(".int-entry-pgs-ads ul"),time);
})
/** 功能：实现擦除功能* param1:要显示的对象* param2：动画执行的时长* */
function wipeAnimate(param1,param2){var paramOriHeight = param1.innerHeight();param1.css({"height": "0","overflow": "hidden","visibility": "visible"});param1.animate({"height":paramOriHeight},{duration:param2,easing:"linear"});
}
</script>
</body>
</html>