지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 sports_javascript 스킬에 대한 자세한 설명

자바스크립트 sports_javascript 스킬에 대한 자세한 설명

WBOY
풀어 주다： 2016-05-16 15:51:26
원래의
1438명이 탐색했습니다.

물체 운동의 원리: 물체의 위치를 ​​바꾸면 움직임이 변합니다.

방법:

1. 움직이는 물체에는 절대 위치 지정을 사용합니다
2. 배치된 객체의 속성(왼쪽, 오른쪽, 위쪽, 아래쪽) 값을 변경하여 객체를 움직이게 합니다. 예를 들어 오른쪽이나 왼쪽으로 이동하려면 offsetLeft(offsetRight)를 사용하여 왼쪽 및 오른쪽 이동을 제어할 수 있습니다.

단계:

1. 이동을 시작하기 전에 기존 타이머를 초기화하세요. (버튼을 계속 클릭하면 개체가 점점 더 빠르게 이동하여 이동 혼란이 발생하기 때문입니다.)
2. 타이머를 켜고 속도를 계산해보세요
3. 이동과 정지(if/else)를 분리하여 정지 조건을 판단하고 이동을 실행합니다

1. 타이머

자바스크립트에는 타이머 전용 함수가 두 개 있습니다.

1. 카운트다운 타이머: timename=setTimeout("function();",delaytime);
2. 루프 타이머: timename=setInterval("function();",delaytime)

Function()은 타이머가 실행될 때 실행되는 이벤트 함수입니다. 하나의 함수일 수도 있고, JavaScript 문일 수도 있습니다. 이는 시간(밀리초)으로 구분하면 됩니다.

카운트다운 타이머는 지정된 시간 후에 이벤트를 트리거하는 반면, 루프 타이머는 간격이 도래할 때 이벤트를 반복적으로 트리거하는 반면, 후자는 지속적으로 작동한다는 점에서 차이가 있습니다.

카운트다운 타이머는 일반적으로 페이지가 한 번만 실행되어야 하는 경우에 사용됩니다. 예를 들어 버튼을 클릭하면 일정 시간이 지나면 페이지가 해당 사이트로 이동하는지 여부를 결정하는 데에도 사용할 수 있습니다. 방문자가 귀하의 사이트에 있습니다. "기존 고객"이 아닌 경우 5~10초 후에 해당 사이트로 이동한 다음 나중에 다시 방문할 경우 특정 버튼을 눌러 빠르게 들어갈 수 있다고 알려주세요. .

루프 타이머는 일반적으로 JavaScript 스크롤 막대나 상태 표시줄과 같이 사이트에서 반복적으로 실행해야 하는 효과에 사용됩니다. 또한 페이지 배경을 날아다니는 눈 그림으로 표현하는 데에도 사용할 수 있습니다. 이러한 이벤트는 간격을 두고 실행되어야 합니다.

때로는 추가된 일부 타이머를 제거하고 싶을 때도 있습니다. 이 경우에는clearTimeout(timename)을 사용하여 카운트다운 타이머를 끄고,clearInterval(timename)을 사용하여 루프 타이머를 끌 수 있습니다.

2. 운동연구

1. 운동: 등속운동(물체를 움직이게 하는 것)

타이머 사용
DIV에 절대 위치 지정 추가
오프셋왼쪽

문제: 특정 위치에 정지 문자가 도달했습니다
해결책: 판단하고 조건이 충족되면 타이머를 끄세요(타이머 저장)
속도가 느려집니다 (보통 시간은 변하지 않지만 숫자 속도는 변합니다)
변수를 사용하여 속도 저장

문제: 7을 취하고 offsetLeft가 300이 아닌 경우 div를 중지할 수 없습니다.
해결책:>=300 //301에서 중지

문제: 300에 도달한 후에도 버튼을 클릭하면 계속 진행됩니다
이유: 버튼을 클릭하고 기능을 실행한 후 타이머를 시작합니다(현재 기능을 한 번 이상 실행)
해결책: else 추가(대상에 도달하기 전에 실행)

문제: 계속 클릭하면 속도가 빨라집니다
이유: 클릭할 때마다 타이머가 시작됩니다. 여러 번 클릭하면 여러 타이머가 동시에 작동합니다.
해결 방법: 한 번에 하나의 타이머만 작동하도록 하려면 먼저 간격()

을 확인하세요.

예시 1,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>分享到</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');
  
  oDiv.onmouseover=function ()
  {
    startMove(0);
  };
  oDiv.onmouseout=function ()
  {
    startMove(-150);
  };
};

var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');
  
  clearInterval(timer);
  timer=setInterval(function (){
    var speed=0;
    
    if(oDiv.offsetLeft>iTarget)
    {
      speed=-10;
    }
    else
    {
      speed=10;
    }
    
    if(oDiv.offsetLeft==iTarget)
    {
      clearInterval(timer);
    }
    else
    {
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<div id="div1">
  <span>分享到</span>
</div>
</body>
</html>
로그인 후 복사

효과는 다음과 같습니다.

예 2, 페이드 인 및 페이드 아웃: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>淡入淡出</title>
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');
  
  oDiv.onmouseover=function ()
  {
    startMove(100);
  };
  oDiv.onmouseout=function ()
  {
    startMove(30);
  };
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');
  
  clearInterval(timer);
  timer=setInterval(function (){
    var speed=0;
    
    if(alpha<iTarget)
    {
      speed=10;
    }
    else
    {
      speed=-10;
    }
    
    if(alpha==iTarget)
    {
      clearInterval(timer);
    }
    else
    {
      alpha+=speed;
      
      oDiv.style.filter='alpha(opacity:'+alpha+')';
      oDiv.style.opacity=alpha/100;
    }
  }, 30);
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
로그인 후 복사

효과는 다음과 같습니다.

등속 운동을 위한 정지 조건

충분히 가깝습니다

예 3, 등속 운동을 위한 정지 조건: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>匀速运动的停止条件</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');
  
  clearInterval(timer);
  timer=setInterval(function (){
    var speed=0;
    
    if(oDiv.offsetLeft<iTarget)
    {
      speed=7;
    }
    else
    {
      speed=-7;
    }
    
    if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
    {
      clearInterval(timer);
      
      oDiv.style.left=iTarget+'px';
    }
    else
    {
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
로그인 후 복사

2. 가변 속도 이동(버퍼 이동)

점차 속도가 느려지고 마침내 멈춥니다.
거리가 멀수록 속도는 빨라집니다
속도는 거리에 따라 결정됩니다
속도=(목표값-현재값)/스케일링 팩터
스케일링 팩터 t가 없고 속도가 너무 크면 즉시 끝점에 도달합니다.

문제: 실제로 300에 도달하지 않았습니다
이유: 속도가 0.9에 불과합니다. //픽셀은 화면이 표시할 수 있는 최대 위치이며 반올림되지 않습니다.
Math.ceil () 반올림
Math.floor()는 내림

문제: 왼쪽으로 이동하면 다른 블록이 누락됩니다.-Math.floor ()
판단: 삼안 속도=속도>0 ? Math.ceil( 속도 ): Math.floor( 속도 )

예시, 버퍼 이동: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>
<script>
function startMove()
{
  var oDiv=document.getElementById('div1');
  setInterval(function (){
    var speed=(300-oDiv.offsetLeft)/10;
    speed=speed>0&#63;Math.ceil(speed):Math.floor(speed);
    
    oDiv.style.left=oDiv.offsetLeft+speed+'px';
    
    document.title=oDiv.offsetLeft+','+speed;
  }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
로그인 후 복사

效果如下：

3.多物体运动

多个div ,鼠标移入变宽
运动框架传参obj,知道让哪个物体动起来
用到缓冲一定要取整

问题：div没运动回去 //清除前一个定时器
原因：只有一个定时器
解决：加物体上的定时器，使每个物体都有一个定时器。定时器作为物体属性

多个div淡入淡出
首先关闭物体上的定时器
经验：多物体运动框架所有东西都不能共用

问题：不是因为定时器,而是因为alpha
解决：作为属性附加到物体上 /不以变量形式存在

offset 的 bug

加border变宽

offsetWith并不是真正的width ,它获取的是盒模型尺寸
解决：躲着 宽度扔到行间,parselnt ( oDiv.style.width )

进一步解决： getStyle ( obj, name ) currentStyle , getComputedStyle
加border ,只要offset就有问题 去掉offset

示例,多物体运动：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:100px; height:50px; background:red; margin:10px; border:10px solid black;}
</style>
<script>
window.onload=function ()
{
  var aDiv=document.getElementsByTagName('div');
  
  for(var i=0;i<aDiv.length;i++)
  {
    aDiv[i].timer=null;
    
    aDiv[i].onmouseover=function ()
    {
      startMove(this, 400);
    };
    
    aDiv[i].onmouseout=function ()
    {
      startMove(this, 100);
    };
  }
};

function startMove(obj, iTarget)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){
    var speed=(iTarget-obj.offsetWidth)/6;
    speed=speed>0&#63;Math.ceil(speed):Math.floor(speed);
    
    if(obj.offsetWidth==iTarget)
    {
      clearInterval(obj.timer);
    }
    else
    {
      obj.style.width=obj.offsetWidth+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
로그인 후 복사

效果如下：

4.任意值运动

任意值运动的单位分为透明度和px。

px单位的任意值

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;}
</style>
<script>
window.onload=function ()
{
  var oDiv1=document.getElementById('div1');
  oDiv1.onmouseover=function (){startMove(this, 'height', 400);};
  oDiv1.onmouseout=function (){startMove(this, 'height', 200);};
  
  var oDiv2=document.getElementById('div2');
  
  oDiv2.onmouseover=function (){startMove(this, 'width', 400);};
  oDiv2.onmouseout=function (){startMove(this, 'width', 200);};
  
  var oDiv3=document.getElementById('div3');
  oDiv3.onmouseover=function (){startMove(this, 'fontSize', 50);};
  oDiv3.onmouseout=function (){startMove(this, 'fontSize', 14);};
  
  var oDiv4=document.getElementById('div4');
  oDiv4.onmouseover=function (){startMove(this, 'borderWidth', 100);};
  oDiv4.onmouseout=function (){startMove(this, 'borderWidth', 10);};
};

function getStyle(obj, name)
{
  if(obj.currentStyle){return obj.currentStyle[name];}
  else{return getComputedStyle(obj, false)[name];}
}

function startMove(obj, attr, iTarget)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){
    var cur=parseInt(getStyle(obj, attr));
    
    var speed=(iTarget-cur)/6;
    speed=speed>0&#63;Math.ceil(speed):Math.floor(speed);
    
    if(cur==iTarget)
    {
      clearInterval(obj.timer);
    }
    else
    {
      obj.style[attr]=cur+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">safasfasd</div>
<div id="div4"></div>
</body>
</html>
로그인 후 복사

效果如下：

透明度的任意值，需要做判断：

判断
var cur=0
if ( attr== 'opacity '){
cur=parseFloat ( getStyle ( obj, attr)) *100
}else{

}
设置样式判断
if ( attr== 'opacity '){
obj.style.fiIter = 'alpha ( opacity: '( cur+speed ) + ')'
obj.style.opacity= ( cur+speed ) /100
}else{

}
로그인 후 복사

5.链式运动

多出来的一个参数，只有传进去的时候才调用
鼠标移入变宽，结束之后弹出abc
先横向展开.再以向展开
鼠标移出,先变回不透明，变矮，变窄

三.封装运动框架(源码下载：https://github.com/jingwhale/jsmove/blob/master/move.js)

基于以上的分析与总结，封装运动框架move.js如下：

function getStyle(obj, name)
{
  if(obj.currentStyle)
  {
    return obj.currentStyle[name];
  }
  else
  {
    return getComputedStyle(obj, false)[name];
  }
}

function startMove(obj, json, fnEnd)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){
    var bStop=true;    //假设：所有值都已经到了
    
    for(var attr in json)
    {
      var cur=0;
      
      if(attr=='opacity')
      {
        cur=Math.round(parseFloat(getStyle(obj, attr))*100);
      }
      else
      {
        cur=parseInt(getStyle(obj, attr));
      }
      
      var speed=(json[attr]-cur)/6;
      speed=speed>0&#63;Math.ceil(speed):Math.floor(speed);
      
      if(cur!=json[attr])
        bStop=false;
      
      if(attr=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else
      {
        obj.style[attr]=cur+speed+'px';
      }
    }
    
    if(bStop)
    {
      clearInterval(obj.timer);
            
      if(fnEnd)fnEnd();
    }
  }, 30);
}
로그인 후 복사

move.js运动框架基本满足现在网页上所有动画的需求（不包括css3）。

四.应用应用

1，完成如下效果：

js代码如下：

<script src="move.js"></script>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('play');
  var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
  var oUl=oDiv.getElementsByTagName('ul')[0];
  
  var now=0;
  for(var i=0;i<aBtn.length;i++)
  {
    aBtn[i].index=i;
    aBtn[i].onclick=function ()
    {
      now=this.index;
      tab();
    };
  }
  
  function tab()
  {
    for(var i=0;i<aBtn.length;i++)
    {
      aBtn[i].className='';
    }
    aBtn[now].className='active';
    startMove(oUl, {top: -150*now});
  }
  
  function next()
  {
    now++;
    if(now==aBtn.length){now=0;}
    tab();
  }
  
  var timer=setInterval(next, 2000);
  
  oDiv.onmouseover=function (){clearInterval(timer);};
  
  oDiv.onmouseout=function (){timer=setInterval(next, 2000);};
};
</script>
로그인 후 복사

应用2，完成如下效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.....
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function ()
{
  var oBtn=document.getElementById('but');
  var oBottom=document.getElementById('zns_bottom');
  var oBox=document.getElementById('zns_box');
  var oBtnClose=document.getElementById('btn_close');
  
  oBox.style.display='block';
  var initBottomRight=parseInt(getStyle(oBottom, 'right'));
  var initBoxBottom=parseInt(getStyle(oBox, 'bottom'));
  oBox.style.display='none';
  
  oBtn.onclick=openHandler;
  oBtnClose.onclick=closeHandler;
  
  function openHandler()
  {
    startMove(oBottom, {right: 0}, function (){
      oBox.style.display='block';
      startMove(oBox, {bottom: 0});
    });
    oBtn.className='but_hide';
    oBtn.onclick=closeHandler;
  }
  
  function closeHandler()
  {
    startMove(oBox, {bottom: initBoxBottom}, function (){
      oBox.style.display='none';
      startMove(oBottom, {right: initBottomRight}, function (){
        oBtn.className='but_show';
      });
    });
    oBtn.onclick=openHandler;
  }
};
</script>
</head>
<body>
  ......
</body>
</html>
로그인 후 복사

源码下载：https://github.com/jingwhale/jsmove

以上所述就是本文的全部内容了，希望大家能够喜欢。

관련 라벨：
javascript 运动
원천：php.cn
이전 기사：최신, 가장 인기 있고 실용적인 15가지 jQuery 플러그인 요약_jquery 다음 기사：Kindeditor 편집기에서 그림 스크롤 막대를 클릭할 때 그림 스크롤 막대를 위로 밀어 올리는 Bug_javascript 트릭
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿