JS回弹原理高级

  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）摩擦力