Xuijs超轻量级的框架+Emile CSS动画效果图

示例代码

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>XuijsDemo</title>

<script src="content/scripts/xui-2.2.0.min.js"></script>

<script src="content/scripts/emile.js"></script>

<script>

function initialise()

{

}

//style  样式处理

function styleshow()

{

}

//style 动画、形变、渐变

function fx()

{

  emile('box1', 'background:#008FFF;left:100px;padding-bottom:100px;opacity:1', {

    duration: 4000, easing: bounce

  });

  emile('box2', 'background:#C8E919;left:200px;padding-bottom:100px;opacity:1', {

    duration: 4000, easing: bounce

  });

    emile('box3', 'background:#AC193D;left:300px;top:400px;padding-bottom:100px;opacity:1', {

    duration: 4000, easing: bounce

  });

    emile('box4', 'background:#008FFF;right:400px;padding-bottom:100px;opacity:1', {

    duration: 4000, easing: bounce

  });

  emile('box5', 'background:#C8E919;right:150px;padding-bottom:100px;opacity:1', {

    duration: 4000, easing: bounce

  });

    emile('box6', 'background:#AC193D;right:350px;top:200px;padding-bottom:100px;opacity:1', {

    duration: 4000, easing: bounce

  });

   emile('boxb', 'left:500px;padding:10px;border:50px solid #5133AB', {

    duration: 500,

    after: function(){

      emile('boxa', 'background:#D24726;left:100px;padding-bottom:100px;opacity:1', {

        duration: 4000, easing: bounce

      });

    }

  });

}

function bounce(pos) {

    if (pos < (1/2.75)) {

        return (7.5625*pos*pos);

    } else if (pos < (2/2.75)) {

        return (7.5625*(pos-=(1.5/2.75))*pos + .75);

    } else if (pos < (2.5/2.75)) {

        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);

    } else {

        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);

    }

  }

</script>

</head>

<body onload="initialise();styleshow();fx();">

<div id="box1" style="position:absolute;left:0px;background:#f00;opacity:0">DIV动画区域块</div>

<div id="box2" style="border:0px solid #00ff00;position:absolute;left:0px;top:200px;background:#000000">DIV动画区域块</div>

<div id="box3" style="border:0px solid #AC193D;position:absolute;left:0px;top:300px;background:#AC193D">DIV动画区域块</div>

<div id="box4" style="position:absolute;right:0px;background:#f00;opacity:0">DIV动画区域块</div>

<div id="box5" style="border:0px solid #00ff00;position:absolute;right:0px;top:200px;background:#000000">DIV动画区域块</div>

<div id="box6" style="border:0px solid #AC193D;position:absolute;right:0px;top:150px;background:#AC193D">DIV动画区域块</div>

<div id="boxa" style="position:absolute;left:0px;background:#D24726;opacity:0">DIV</div>

<div id="boxb" style="border:0px solid #00ff00;position:absolute;left:0px;top:350px;background:#362168">DIV动画区域块</div>

</body>

</html>

代码示例包

点击下载

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

作者：Mark Fan (小念头)    来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可

跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画的更多相关文章

  1. 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

    PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...

  2. 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起

    Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. 分享自己的超轻量级高性能ORM数据访问框架Deft

    Deft 简介 Deft是一个超轻量级高性能O/R mapping数据访问框架,简单易用,几分钟即可上手. Deft包含如下但不限于此的特点: 1.按照Transact-SQL的语法语义风格来设计,只 ...

  4. 基于领域驱动设计(DDD)超轻量级快速开发架构

    smartadmin.core.urf 这个项目是基于asp.net core 3.1(最新)基础上参照领域驱动设计(DDD)的理念,并参考目前最为了流行的abp架构开发的一套轻量级的快速开发web ...

  5. 基于领域驱动设计(DDD)超轻量级快速开发架构(二)动态linq查询的实现方式

    -之动态查询,查询逻辑封装复用 基于领域驱动设计(DDD)超轻量级快速开发架构详细介绍请看 https://www.cnblogs.com/neozhu/p/13174234.html 需求 配合Ea ...

  6. 前端开发福音！阿里Weex跨平台移动开发工具开源－b

    阿里巴巴今天在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请.Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS.安卓.YunOS及 ...

  7. [.net 面向对象程序设计深入]（5）MVC 6 —— 构建跨平台.NET开发环境（Windows/Mac OS X/Linux）

    [.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux) 1.关于跨平台 上篇中介绍了MVC的发展历程,说到ASP.NET ...

  8. 全球首个全流程跨平台界面开发套件，PowerUI分析

    一.       首个全流程跨平台界面开发套件,PowerUI正式发布 UIPower在DirectUI的基础上,自主研发全球首个全流程跨平台界面开发套件PowerUI(PUI)正式发布,PowerU ...

  9. 【转贴】-- 基于QT的跨平台应用开发

    原帖地址:http://www.cnblogs.com/R0b1n/p/4106613.html 1 Qt简介 Qt是1991年奇趣科技开发的一个跨平台的C++图形用户界面应用程序框架.它提供给应用程 ...

随机推荐

  1. 第一百八十三节，jQuery-UI，知问前端--验证插件

    jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...

  2. HTML CSS表格如何控制上下间距

    css:td{margin-top:10px; 上间距margin-right:10px; 右间距margin-bottom:10px; 下间距margin-left:10px; 左间距}

  3. 实战Java虚拟机之中的一个“堆溢出处理”

    从今天開始.我会发5个关于java虚拟机的小系列: 实战Java虚拟机之中的一个"堆溢出处理" 实战Java虚拟机之二"虚拟机的工作模式" 实战Java虚拟机之 ...

  4. 将Mac上的***代理共享给其他设备

    Windows版***带有Share over LAN功能,可以让一些不方便安装***客户端的设备一同“鸡犬升天”,如未越狱的iOS设备.但是 OS X 就没有这么幸运了,这时候你需要Privoxy助 ...

  5. Entity Framework中的主从表关系的使用

    其关系图: 我们使用Entity Framework生成映射关系如下: 其中author表中的books导航属性为一个集合,表示当前作者的书. 在页面中我们可以使用如下代码来实现: 代码中author ...

  6. 2205 Problem B

    问题 B: [高精度]简单高精度加法 时间限制: 1 Sec  内存限制: 64 MB 提交: 77  解决: 25 [提交][状态][讨论版] 题目描述 修罗王解决了计算机的内存限制问题,终于可以使 ...

  7. Yii2 Queue队列

    github地址:https://github.com/yiisoft/yii2-queue 问题:https://github.com/yiisoft/yii2-queue/issues Jobs ...

  8. 【spring boot logback】spring boot中logback日志乱码问题

    在初次使用logback的自定义配置文件完整的控制spring boot日志后,发现了一个无法忍受的问题,就是日志乱码. 控制台看到打印日志乱码如下: 而日志文件打开: 记事本打开 sublime打开 ...

  9. centos6.4下安装mysql5.7.18

    1.安装前工作 在安装前需要确定现在这个系统有没有 mysql,如果有那么必须卸载(在 centos7 自带的是 mariaDb 数据库,所以第一步是卸载数据库). 卸载系统自带的Mariadb: 查 ...

  10. (int)()和int()强制类型转换

    (int)()这个是c语言的强制转换,众所知周 int(),这种理解靠谱点 Class A { A(int i){} } 调用int类型的构造函数然后转换的 其实都可以转换.