layui动画：跳动的地球

最新推荐文章于 2024-06-07 15:43:29 发布

cmdch2017

最新推荐文章于 2024-06-07 15:43:29 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/weixin_43914278/article/details/111288496

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台用户界面</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
.site-doc-icon li{width: 222px;}
.site-doc-icon li .layui-anim{width: 317px; height: 317px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-image:url(1.jpg); cursor: pointer; color: pink; border-radius: 50%;}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>动画过程演示</legend>
</fieldset>
<ul class="site-doc-icon site-doc-anim">
<li>
<div class="layui-anim layui-anim-up layui-anim-loop" data-anim="layui-anim-scale">注意</div>
</li>
</ul>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>



<script>
layui.use('jquery', function(){
var $ = layui.$;

//演示动画
$('.site-doc-icon .layui-anim').on('click', function(){
var othis = $(this), anim = othis.data('anim');

//停止循环
if(othis.hasClass('layui-anim-loop')){
return othis.removeClass(anim);
}

othis.removeClass(anim);

setTimeout(function(){
othis.addClass(anim);
});
//恢复渐隐
if(anim === 'layui-anim-fadeout'){
setTimeout(function(){
othis.removeClass(anim);
}, 2000);
}
});
});
</script>
</body>
</html>