Layui动画演示代码
taotaoit Layui 2019-07-16 1780 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

2957323 2008 24
最新评论
:zhenbang:
评 Bootstrap通过模态框modal实现图片弹出放大
能不能显示这里当前在播放的视频的文件名?
评 设置video js多视频连续播放
为啥按照你的方法去写完后 提示未定义的hostname?
评 tp6用tp5er实现数据库备份,数据库还原
了解了,应该用超链接去访问 我当时用的是ajax,这回在到你这看看如何用Tp6备份数据库
评 thinkphp6 整合PhpSpreadsheet 导出数据到excel
为什么我执行这个方法 没有下载 ,但用url访问这个页面就可以下载了 是我哪里弄错了吗
评 thinkphp6 整合PhpSpreadsheet 导出数据到excel
文章标签更多
ThinkPHP (225)
Mysql (42)
DedeCms (33)
jQuery (54)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

Layui示例中动画演示代码

from clipboard

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<style>
/* 宫格 */
.site-doc-icon{margin-bottom: 50px; font-size: 0;}
.site-doc-icon li{display: inline-block; vertical-align: middle; width: 127px; height: 105px; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;}
.site-doc-anim li{height: auto;}
.site-doc-icon li .layui-icon{display: inline-block; font-size: 36px;}

.site-doc-icon li .doc-icon-name,
.site-doc-icon li .doc-icon-code{color: #c2c2c2;}
.site-doc-icon li .doc-icon-fontclass{height: 40px; line-height: 20px; padding: 0 5px; font-size: 13px; color: #333; }
.site-doc-icon li:hover{background-color: #f2f2f2; color: #000;}

.site-doc-icon li{width: 222px;}
.site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
</style>
<body> 
<ul class="site-doc-icon site-doc-anim">
  <li>
    <div class="layui-anim layui-anim-up" data-anim="layui-anim-up">从最底部往上滑入</div>
    <div class="code">layui-anim-up</div>
  </li>
  <li>
    <div class="layui-anim layui-anim-upbit" data-anim="layui-anim-upbit">微微往上滑入</div>
    <div class="code">layui-anim-upbit</div>
  </li>
  <li>
    <div class="layui-anim layui-anim-scale" data-anim="layui-anim-scale">平滑放大</div>
    <div class="code">layui-anim-scale</div>
  </li>
   <li>
    <div class="layui-anim layui-anim-scaleSpring" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
    <div class="code">layui-anim-scaleSpring</div>
  </li>
</ul>
<ul class="site-doc-icon site-doc-anim">
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
    <div class="code">layui-anim-fadein</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
    <div class="code">layui-anim-fadeout</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
    <div class="code">layui-anim-rotate</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
    <div class="code">追加:layui-anim-loop</div>
  </li>
</ul>           
               
<script src="layui/layui.js"></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);
      }, 1300);
    }
  });
});
</script>

</body>
</html>

版权声明:本站原创文章,允许自由转载。

相关推荐
layui垂直导航,鼠标经过去掉左侧的青色条块
Layui | 2019-07-05 6512
打开layui.css找到 .layui-nav-tree .layui-nav-bar{width:5px;height:0;background-color:#009688} 将width:5px改为width:0就可以了
layui栅格如何实现5等分,一行5列
Layui | 2019-07-05 4620
layui栅格如何实现5等分,一行5列? layui 栅格系统是12格的 不能实现5等分,可以自己仿照layui定义css样式 打开laui css查看源码 发现一等分是8.3%   layui是12格的; 所以 实现五等分 12/5*8.3% 就是19.9999992% 5等分,12格,大概每列占比是1...
评论:0条
评论加载中...
发表评论