1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 img{ width:200px; height:200px; position:absolute;}
8 .box{ width: 5px; height: 5px; background: #000; position: absolute; display: none;}
9 </style>
10
11 <script type="text/javascript">
12 window.onload = function(){
13
14 var oPic = document.getElementById("pic");
15 var iSpeedX = 0; //定义在X方向上的速度
16 var iSpeedY = 0; //定义在Y方向上的速度
17 var timer = null;
18
19 oPic.style.width = 0;
20 oPic.style.height = 0;
21 var beginX = document.documentElement.clientWidth /2; //获取可视区在X方向上的中心点
22 var beginY = document.documentElement.clientHeight /2; //获取可视区在Y方向上的中心点
23 oPic.style.left = beginX + "px"; //初始化oPic的left值
24 oPic.style.top = beginY + "px"; //初始化oPic的Top值
25 console.log(beginX + " , " + beginY);
26
27 toChange(200);
28
29 function toChange(iTraget){
30 timer = setInterval(function (){
31 if(oPic.offsetWidth == iTraget){
32 clearInterval(timer);
33 startMove();
34 }else{//加载时显示oPic
35 oPic.style.width = oPic.offsetWidth + 10 + "px";
36 oPic.style.height = oPic.offsetHeight + 10 +"px";
37 oPic.style.left = beginX - oPic.offsetWidth /2 + "px";
38 oPic.style.top = beginY - oPic.offsetHeight /2 +"px";
39 }
40
41 },30);
42
43 }
44 oPic.onmousedown = function(ev){
45 var oEvent = ev || event;
46 var disX = oEvent.clientX - oPic.offsetLeft; //获取鼠标按下时在X方向上的的坐标位置
47 var disY = oEvent.clientY - oPic.offsetTop; //获取鼠标按下时在Y方向上的坐标位置
48 var preX = oEvent.clientX; //计算速度的第一个点-X
49 var preY = oEvent.clientY; //计算速度的第一个点-Y
50 clearInterval(timer);
51 document.onmousemove = function (ev){
52 var oEvent = ev || event;
53 iSpeedX = oEvent.clientX - preX; //速度-X
54 iSpeedY = oEvent.clientY - preY; //速度-Y
55 preX = oEvent.clientX;
56 preY = oEvent.clientY;
57 var l = oEvent.clientX - disX; //鼠标拖动时的坐标-X
58 var t = oEvent.clientY - disY; //鼠标拖动时的坐标-Y
59 //拖动时通过DOM来创建DIV计算速度
60 var oBox = document.createElement("div");
61 oBox.className = "box";
62 oBox.style.left = oEvent.clientX + "px";
63 oBox.style.top = oEvent.clientY + "px";
64 document.body.appendChild(oBox);
65
66 oPic.style.left = l + "px"; //拖动时oPic的left或top值
67 oPic.style.top = t + "px";
68
69 //document.title = l + "," +t + "," + iSpeedX + "," + iSpeedY;
70 }
71 document.onmouseup = function (){
72 document.onmousemove = null;
73 startMove(); //回弹
74 }
75
76 return false;
77
78 }
79 function startMove(){
80 clearInterval(timer);
81 timer = setInterval(function (ev){
82 iSpeedY +=3;
83 var L = oPic.offsetLeft + iSpeedX;
84 var T = oPic.offsetTop + iSpeedY;
85 if(L < 0){
86 L = 0;
87 iSpeedX *= -1;
88 iSpeedX *=0.75;
89 }else if(L > document.documentElement.clientWidth - oPic.offsetWidth){
90 L= document.documentElement.clientWidth - oPic.offsetWidth;
91 iSpeedX *= -1;
92 iSpeedX *=0.75;
93 }
94 if(T < 0){
95 T = 0;
96 iSpeedY *=-1;
97 iSpeedY *=0.75;
98 }else if(T > document.documentElement.clientHeight - oPic.offsetHeight){
99 T = document.documentElement.clientHeight - oPic.offsetHeight;
100 iSpeedY *=-1;
101 iSpeedY *=0.75;
102 iSpeedX *=0.75;
103 }
104 oPic.style.left = L + "px";
105 oPic.style.top = T + "px";
106
107 console.log(L + " , " + T + " , " + iSpeedX + " , " + iSpeedY);
108 },30)
109 }
110 }
111 </script>
112
113 </head>
114
115 <body>
116
117 <img src="f.jpg" id="pic">
118
119 </body>
120 </html>
- 有时候发现会有很多难点，有时候又发现没有难点。
- 各种坐标的获取。
- 根据坐标来计算各种值（比如：速度大小）
- 边界值的判断
- 速度*一个小数（0.nn）摩擦力
