• 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)摩擦力
  • 相关阅读:
    <C++ QT4 GUI 编程>第一章笔记
    生成snmp++动态库
    PHP 5.3 新特性
    编译安装-Subversion 1.8.5
    Xen入门系列四【Xen 管理实操】
    Xen入门系列三【Xen 管理工具 xm】
    COMET探索系列三【异步通知服务器关闭数据连接实现思路】
    PHP生成二维码【谷歌API+qrcode+圆角Logo】
    SSH免密码登陆详解
    COMET探索系列二【Ajax轮询复用模型】
  • 原文地址:https://www.cnblogs.com/xy404/p/3625931.html
Copyright © 2020-2023  润新知