擦除效果实现"/>
擦除效果实现
实现思路
项目中要实现一个动画效果,类似于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>
效果截图
更多推荐
擦除效果实现
发布评论