基于html5手机移动端对话框特效

html    演示地址:http://www.w2bc.com/demo/201511/2015-11-01-html5-mobile-alter-info/index.html

<center>
        <input type="button" id="success" value="成功" />
        <input type="button" id="error" value="错误" />
        <input type="button" id="load" value="正在加载" />
        <input type="button" id="tip" value="提示" />
    </center>

    <script type="text/javascript" src="zepto.min.js"></script>
    <script type="text/javascript" src="mdialog.js"></script>
    <script type="text/javascript">
        //成功
        $("#success").click(function () {
            new TipBox({ type: ‘success‘, str: ‘操作成功‘, hasBtn: true });
        });
        //错误
        $("#error").click(function () {
            new TipBox({ type: ‘error‘, str: ‘对不起,出错了!‘, hasBtn: true });
        });

        //提示
        $("#tip").click(function () {
            new TipBox({ type: ‘tip‘, str: ‘这是提示信息‘, clickDomCancel: true, setTime: 10000500, hasBtn: true });
        });

        //加载
        $("#load").click(function () {
            new TipBox({
                type: ‘load‘, str: "努力加载中..", setTime: 1500, callBack: function () {
                    new TipBox({ type: ‘success‘, str: ‘操作成功‘, hasBtn: true });
                }
            });
        });

    </script>

时间: 2024-10-26 03:20:13

基于html5手机移动端对话框特效的相关文章

基于HTML5手机登录注册表单代码

分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="demo"> <nav class="main_nav"> <ul> <li><a class="cd-signin" href="#0">登录</a></li&

基于Html5的移动端开发框架的研究

下面统计信息部分来自网络,不代表个人观点.请大家参考.         基于Html5移动端开发框架调查                                   序号 框架 简介 优点 缺点 备注 侧重点         1 PhoneGap   PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智能手机

基于HTML5/CSS3图片网格动画特效

现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即可让这些图片出现不可思议的动画效果,值得一看.效果图如下: 在线预览   源码下载 实现的代码: <div class="grid"> </div> <span class="animate">开始动画</span> &l

smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件。通过该js插件,可以非常轻松的在页面中制作出各种烟雾效果。

Smoke.js 是一个浏览器默认警告系统的JavaScript替代品,如果你想要跨浏览器与平台的标准化JavaScript警告窗口,Smoke.js就是你想要的. Smoke.js是一个轻量级且灵活的JavaScript插件,只是用来替代原有的alert而已.它完全由HTML与CSS3构成,所以你能够自己添加样式来个性化. 要求:CSS3支持 兼容性:大部分浏览器,包括IE6(没有CSS3可视化效果) License:MIT 特性: Signal:消息会显示几秒后消失 Alert:常规的ale

基于html5水波的加载特效

先来看效果  图片2,利用canvas生成得到. var aImgArr = [ "http://xinhuatone.com/zt/apecxjp/m/images/4.jpg", "http://xinhuatone.com/zt/apecxjp/m/images/5.jpg", "http://xinhuatone.com/zt/apecxjp/m/images/6.jpg", "http://xinhuatone.com/zt/

基于Html5的智能家居手机客户端设计(一)——找到openhab的rest

今天开始我的毕业设计,基于HTML5的智能家居手机客户端设计.挑剔了好久,终于找到我可以使用国外开源项目智能家居核心,通过restful(我也不是很懂,毕竟我只是电子信息学院爱好网络). REST描述了一个架构样式的网络系统,比如 web 应用程序.在目前主流的三种Web服务交互方案中,REST相比于SOAP(Simple Object Access protocol,简单对象访问协议)以及XML-RPC更加简单明了,无论是对URL的处理还是对Payload的编码,REST都倾向于用更加简单轻量

基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: <style type="text/css"> #liu{ width:280px; height: 279px; background: url(shishi.png) no-repeat; border-radius:140px; -webkit-animation:run 6s

基于HTML5 Canvas实现的图片马赛克模糊特效

效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素把图像转换成像素形式,这基本上是一个为canvas imageData功能的简单演示. 此脚本现存于GitHub上,您可以在那里下载到脚本和示例.在GitHub上查看像素化资源 二.选项此方法接受一个对象数组,每个对象都拥有一组选项.resolution : 渲染像素间的像素距离,必须的.shape

基于HTML5 SVG全屏滑块切换特效

基于HTML5 SVG全屏滑块切换特效是一款基于jQuery+HTML5实现的全屏动画切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="cd-slider-wrapper"> <ul class="cd-slider"> <li class="visible"> <div style=" position:fixed; z-inde