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{ 200px; height:200px; position:absolute;} 8 .box{ 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）摩擦力
