forked from drduan/minggeJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
133 lines (116 loc) · 4 KB
/
demo.html
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8"/>
<title>MingGeJs1.7.2,国产山寨JQUERY，请支持国产，官网www.shearphoto.com</title>
<style type="text/css">
#some_element,#some_element2 {
background:#92b901;
border-radius:5px;
font-size:12px;
height:60px;
left:0;
line-height:60px;
position:absolute;
text-align:center;
top:5px;
width:80px;
}
#some_element2 {
color:red;
top:400px;
}
body input {
height:50px;
width:300px;
}
</style>
<script src="MingGe_Min_1.7.2.js"></script>
<script>
//MingGe.setVar("D");//更换主变量名称。默认是$("XXXX")
$(function() {
function an(some) {
some.animate({ //linear|ease$|ease-in|ease-out|ease-in-out|cubic-bezier 可选择的动画模式
rotate:"20deg",
"background-color":"#1ec7e6"
}, 1500, "ease-in").animate({
left:"500px",
rotate:"0deg"
}, 1e3, "ease").animate({
rotate:"-360deg",
left:0,
"background-color":"#92b901"
}, 1500, "ease-out", function() {
alert("id:"+this.id+"对象，串联动画全部完成");
});
} ;
an($("#some_element,#some_element2"));
$("input").eq(6).click(function(){//再来一次动画
an($("#some_element,#some_element2"));
});
$("input").eq(4).click(function(){//淡入
$("#some_element,#some_element2").fadeIn(1000,function(){alert("id:"+this.id+"淡入成功");});
});
$("input").eq(5).click(function(){//淡出
$("#some_element,#some_element2").fadeOut(1000,function(){alert("id:"+this.id+"淡出成功");});
});
$("body div.main input").eq(0).bind({//事件绑定 one bind click on 等事件都齐全了
click:function() {
alert('$("body div.main input")绑定了点击事件，和JQUERY一样的，看DEMO的代码');
}
});
$("input").eq(1).click(function() {//创建节点
$("div").eq(1).createNode("p", {
html:" 把DIV添加在第一"
}, "内前");
});
$("input").eq(2).click(function() {//创建节点
$("div").eq(1).createNode("p", {
html:"把DIV添加在DIV最后面"
}, "内后");
});
$("input").eq(3).click(function() {
//AJAX读取远程文件
$.ajax({ // $.ajax,$.post,$().load,$.get() $.getJSON的接口也齐全了
url:"MingGeJs介绍.txt",
data:{a:1,b:2}, //示范传参数
type:"get", //不作介绍，和JQUERY的$.ajax接口一致
//dataType:"json", //可用JSONP
//jsonp:"callback",
//jsonpCallback:"callback",
timeout:2e4,
async:true,
lock:true,//新加入的同线程AJAX锁定
complete:false,
success:function(serverdata) { //上传成功事件
alert(serverdata);
},
error:function(ErroMsg) {
alert(ErroMsg + "错误代码，请用http运行AJAX");
},
cache:false
});
});
});
</script>
</head>
<body>
<div class="main">
<br><br><br><br>
<h1>强大的minggeJS，你会JQUERY你也会用minggeJS,语法是一样的！但是minggeJS比JQUERY还要强大，文件小，选择器的效率在JQUERY和ZEPTO之上，超强的CSS3动画
JQUERY有的功能，minggeJS都有基本上有，压缩后只有20K大</h1>
<div>|我是父DIV|</div>
<div id="some_element">minggeJS动画</div>
<div id="some_element2">minggeJS动画</div>
<input type="button" value="还有强大的mingge选择器，兼容IE678">
<input type="button" value="创建节点第一个DIV节点">
<input type="button" value="创建节点最后一个DIV节点">
<input type="button" value="ajax读取远程">
<input type="button" value="淡入">
<input type="button" value="淡出">
<input type="button" value="再来一次动画">
<br><br><br><br>
minggeJS的接口就何止这些，请自己按着你所认识的JQUERY的函数。来测试下其他函数
</div>
</body>
</html>