css动效库animate.css和swiper.js
animate.css
https://daneden.github.io/animate.css/
学习的文档：http://www.jq22.com/jquery-info819
腾讯团队的JXanimate
http://alloyteam.github.io/JXAnimate/index.html
swiper.js中的hashnav这个属性没看懂。
swiper.js 的学习笔记。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet"> <style> *{ margin:0; padding:0; } html,body{ width:100%; height: 100%; overflow: hidden; } .ab{ position: absolute; } img{ width: 100%; } .swiper-container { width: 400px; height: 600px; margin:0 auto; } .swiper-container .swiper-wrapper{ width: 100%; } .swiper-container .swiper-wrapper .swiper-slide{ overflow: hidden; } </style> <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.js"></script></head><body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide slide1" style="background:#FF7F24"> <p class="ani infinite" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.3s"> <img src="./down.jpg" style="width: 30px"> </p> </div> <div class="swiper-slide slide2" style="background: #FF6A6A"> <div class="swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide slide2_1"></div> <div class="swiper-slide slide2_1"></div> </div> </div> </div> <div class="swiper-slide slide3" style="background: #FFE7BA"> <div class="swiper-container3"> <div class="swiper-wrapper"> <div class="swiper-slide slide2_1"></div> <div class="swiper-slide slide2_1"></div> </div> </div> </div> <div class="swiper-slide slide4" style="background: #FF34B3"> <div class="swiper-container4"> <div class="swiper-wrapper"> <div class="swiper-slide slide4_1"></div> <div class="swiper-slide slide4_1"></div> </div> </div> </div> <div class="swiper-slide slide5" style="background: #EEEEE0"> <div class="swiper-container5"> <div class="swiper-wrapper"> <div class="swiper-slide slide5_1"></div> <div class="swiper-slide slide5_1"></div> </div> </div> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', hashnav:true }) </script></body></html> |
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
· “你见过凌晨四点的洛杉矶吗？”--《我们为什么要睡觉》
· 编程神器Trae：当我用上后，才知道自己的创造力被低估了多少
· C# 从零开始使用Layui.Wpf库开发WPF客户端
· 开发的设计和重构，为开发效率服务
· 从零开始开发一个 MCP Server！
2016-05-23 setTimeout 0秒