-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (133 loc) · 4.14 KB
/
index.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
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="box">
<span class="btn">></span>
</div>
<script>
/**
* 使用offsetLeft,需注意margin的使用
* offsetLeft = margin-left + left;
* offsetWidth= padding + border + width;
*
* @author Lonve
*/
function getStyle(elem,attr){
var result = null;
result = elem.currentStyle?elem.currentStyle[attr]:getComputedStyle(elem,false)[attr];
if(attr=="opacity"){
return parseInt(parseFloat(result)*100);
}
return parseInt(result);
}
var timer = null;
//匀速运动停止条件--->距离足够近
function offsetMove1(offset){
var oDiv = document.getElementById("oDiv");
var speed = 0;
speed = oDiv.offsetLeft < offset?10:-10;
clearInterval(timer);
timer = setInterval(function(){
if(oDiv.offsetLeft >= offset){ //Math.abs(oDiv.offsetLeft - offset)<speed;
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
},30)
}
//缓动运动条件 1.变化的运动速度,最后速度为零
//问题:offsetLeft
function offsetMove2(elem,offset){
clearInterval(elem.timer);
var speed = 0;
elem.timer = setInterval(function(){
speed = (offset - elem.offsetLeft)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//是否到达到目标点
if(elem.offsetLeft == offset){
clearInterval(elem.timer);
}else{
elem.style.left = elem.offsetLeft + speed + "px";
}
},30)
}
//任意属性值
//避免小数值 parseInt(0.3*100)
function offsetMove3(elem,attr,offset){
clearInterval(elem.timer);
elem.timer = setInterval(function(){
var curAttr = getStyle(elem,attr); //当前属性值
var speed = (offset - curAttr)/8; //当前速度
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(offset == curAttr){
clearInterval(elem.timer);
}else{
if(attr=="opacity"){
elem.style.filter = "alpha(opacity="+(curAttr +speed)+")";
elem.style.opacity= (curAttr + speed)/100;
}else{
elem.style[attr] = (curAttr + speed) + "px";
}
}
},30)
}
//链式运动
function offsetMove4(elem,attr,offset,fn){
clearInterval(elem.timer);
elem.timer = setInterval(function(){
var curAttr = getStyle(elem,attr);
var speed = (offset - curAttr)/8;
speed = speed > 0? Math.ceil(speed):Math.floor(speed);
if(offset == curAttr){
clearInterval(elem.timer);
if(fn){ fn(); }
}else{
if(attr=="opacity"){
elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
elem.style.opacity= (curAttr+speed)/100;
}else{
elem.style[attr] = curAttr + speed + "px";
}
}
},30)
}
//多个属性同时变化
function offsetMove5(elem,json,fn){
var isStop = true; //所有值都到达
clearInterval(elem.timer);
elem.timer = setInterval(function(){
//历遍json属性
for(var attr in json){
//1.取当前与速度
var offset = json[attr];
var curAttr = getStyle(elem,attr);
var speed = (offset - curAttr)/8;
speed = speed > 0? Math.ceil(speed):Math.floor(speed);
//2.检测停止
if(offset!=curAttr){
isStop = false;
}
if(attr=="opacity"){
elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
elem.style.opacity= (curAttr+speed)/100;
}else{
elem.style[attr] = curAttr + speed + "px";
}
}
//所有值都到达目标值,则停止
if(isStop){
clearInterval(elem.timer);
if(fn){ fn(); }
}
},30);
}
</script>
</body>
</html>