课程中心 问答&分享 读书 注册、登录 关闭菜单
app开发 - 启动动画教程
课程介绍:
详细讲解启动动画的原理及实现过程,样例使用了hui的轮播动画,mui同理。
发布时间 : 2016-12-28  浏览 : 5738 次
教程内容

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/hui.css" />
</head>
<body>
<div id="HUI_Header">
    <div id="HUI_Back"></div>
    <h1>HUI - Hello</h1>
</div>
<div class="HUI_Wrap">
    <div style="padding:50px 20px; text-align:center; font-size:26px; color:#9E9E9E;">
        启动动画演示    
    </div>
</div>
<!-- 全屏广告动画 -->
<style>
#huiStartBanner{width:100%; height:100%; position:fixed; z-index:9998; left:0px; top:0px; background:#FFFFFF;}
#huiStartBanner li{overflow:hidden;}
#huiStartBanner .HUI_SliderPoint{bottom:30px;}
#huiStartBanner .HUI_SliderPointIn{background:none;}
#huiStartBannerClose{width:50px; position:fixed; z-index:9999; top:20px; right:20px; background:#FFFFFF; text-align:center; border-radius:3px; height:26px; line-height:26px; font-size:12px; color:#49BDCC;}
</style>
<div id="huiStartBanner">
    <div class="HUI_Slide" id="slider">
        <ul>
            <li style="background:#49BDCC;"><img src="img/startBanner1.png" /></li>
            <li style="background:#25B263;"><img src="img/startBanner2.png" /></li>
            <li style="background:#44C5FF;"><img src="img/startBanner3.png" /></li>
            <li style="background:#43AAEC;"><a href="javascript:huiStartBannerClose();"><img src="img/startBanner4.png" /></a></li>
        </ul>
    </div>
</div>
<div id="huiStartBannerClose">关闭</div>
<script type="text/javascript" src="js/hui.js"></script>
<script src="js/huiSlide.js" type="text/javascript" charset="utf-8"></script>
<script>
var slider;
var wininfo = hui.winInfo();
hui('#slider').find('li').css({height:wininfo.height+'px'});
slider = new huiSlide('#slider');
slider.autoPlay = false;
slider.loop     = false;
slider.run();
//关闭
hui('#huiStartBannerClose').click(function(){
    huiStartBannerClose();
});
function huiStartBannerClose(){
    hui('#huiStartBanner').remove();
    hui('#huiStartBannerClose').remove();
}
</script>
</body>
</html>


相关教程
CopyRight © 2011 - 2016 Hcoder.net 陕ICP备14004669号-2
客服QQ : 1265928288
MUI实战教程 -《仿有道词典》已经发布!
内容涵盖:
原生窗口、AJAX、上啦加载、下拉刷新、分享、微信登陆、app 升级、推送等非常丰富的知识点。
报名、观看地址:
https://ke.qq.com/course/194834#tuin=4f8da6