跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画
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动画的更多相关文章
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- 分享自己的超轻量级高性能ORM数据访问框架Deft
Deft 简介 Deft是一个超轻量级高性能O/R mapping数据访问框架,简单易用,几分钟即可上手. Deft包含如下但不限于此的特点: 1.按照Transact-SQL的语法语义风格来设计,只 ...
- 基于领域驱动设计(DDD)超轻量级快速开发架构
smartadmin.core.urf 这个项目是基于asp.net core 3.1(最新)基础上参照领域驱动设计(DDD)的理念,并参考目前最为了流行的abp架构开发的一套轻量级的快速开发web ...
- 基于领域驱动设计(DDD)超轻量级快速开发架构(二)动态linq查询的实现方式
-之动态查询,查询逻辑封装复用 基于领域驱动设计(DDD)超轻量级快速开发架构详细介绍请看 https://www.cnblogs.com/neozhu/p/13174234.html 需求 配合Ea ...
- 前端开发福音！阿里Weex跨平台移动开发工具开源－b
阿里巴巴今天在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请.Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS.安卓.YunOS及 ...
- [.net 面向对象程序设计深入]（5）MVC 6 —— 构建跨平台.NET开发环境（Windows/Mac OS X/Linux）
[.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux) 1.关于跨平台 上篇中介绍了MVC的发展历程,说到ASP.NET ...
- 全球首个全流程跨平台界面开发套件，PowerUI分析
一. 首个全流程跨平台界面开发套件,PowerUI正式发布 UIPower在DirectUI的基础上,自主研发全球首个全流程跨平台界面开发套件PowerUI(PUI)正式发布,PowerU ...
- 【转贴】-- 基于QT的跨平台应用开发
原帖地址:http://www.cnblogs.com/R0b1n/p/4106613.html 1 Qt简介 Qt是1991年奇趣科技开发的一个跨平台的C++图形用户界面应用程序框架.它提供给应用程 ...
随机推荐
- Python 爬虫实战2 百度贴吧帖子
爬取百度贴吧的帖子.与上一篇不同的是,这次我们需要用到文件的相关操作. 本篇目标 对百度贴吧的任意帖子进行抓取 指定是否只抓取楼主发帖内容 将抓取到的内容分析并保存到文件 1.URL格式的确定 首先, ...
- hadoop之WordCount源代码分析
//近期在研究hadoop.第一个想要要開始研究的必然是wordcount程序了.看了<hadoop应用开发实战解说>结合自己的理解,对wordcount的源代码进行分析. <pre ...
- load data导入数据之csv的用法
今天总结一下:csv格式文件导入的方法. 1.准备数据表:CSV
- 【OC学习-13】什么是组合，它和继承是什么关系？
继承有两缺点:(1)当层级越来越多时,假如每一个层级都有实例变量,那么最下层的子类继承的实例变量会超级多,沉重.(2)当消息传递自子类往上时.层级越多,效率越低下. 所以就有了组合.说实话区分继承和组 ...
- hdu 2460(tarjan求边双连通分量+LCA)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2460 思路:题目的意思是要求在原图中加边后桥的数量,首先我们可以通过Tarjan求边双连通分量,对于边 ...
- 关于OCR，一些想法
OCR一般分为两种: 1,根据给定的字符特征集合,提取未知字符的特征进行匹配识别:(典型例子:GOCR) 2,不知道字符特征,但给出提取特征的规则,通过机器学习training来获取某个字符集的特征集 ...
- 《从零开始学Swift》学习笔记（Day 7）——Swift 2.0中的print函数几种重载形式
原创文章,欢迎转载.转载请注明:关东升的博客 Swift 2.0中的print函数有4种重载形式: l print(_:).输出变量或常量到控制台,并且换行. l print(_:_:).输出 ...
- The Intriguing Obsession
C. The Intriguing Obsession time limit per test 1 second memory limit per test 256 megabytes input s ...
- SQL查临时表没有返回数据集
问题描述:在SQL中可以查询到数据,返回不到页面上. 解决办法: set nocount on create table #list [转] 每次我们在使用查询分析器调试SQL语句的时候,通常会看到一 ...
- IOS开发复习笔记（1）-OC基础知识
在上班之余学习IOS已经有三个多月了,因为基础有些薄弱从OC的基本语法开始学习的,相继看了青柚子和红柚子的书,现在在看编程实战,趁这个机会好好的总结一下: 1.命名约定 对象类型和名称一致,以免混淆 ...