masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang kemahiran javascript sports_javascript

Penjelasan terperinci tentang kemahiran javascript sports_javascript

WBOY
Lepaskan： 2016-05-16 15:51:26
asal
1437 orang telah melayarinya

Prinsip pergerakan objek: Dengan menukar kedudukan objek, pergerakan berubah.

Kaedah:

1. Gunakan kedudukan mutlak untuk objek bergerak
2. Buat objek bergerak dengan menukar nilai atribut (kiri, kanan, atas, bawah) objek yang diposisikan. Contohnya, untuk bergerak ke kanan atau kiri, anda boleh menggunakan offsetLeft(offsetRight) untuk mengawal pergerakan kiri dan kanan.

Langkah:

1 Sebelum memulakan pergerakan, kosongkan pemasa sedia ada (kerana jika anda mengklik butang secara berterusan, objek akan bergerak lebih cepat dan lebih pantas, menyebabkan pergerakan huru-hara)
2. Hidupkan pemasa dan kira kelajuan
3. Asingkan pergerakan dan berhenti (jika/lain), tentukan keadaan berhenti, dan laksanakan pergerakan

1. Pemasa

Dalam javascript, terdapat dua fungsi khusus untuk pemasa, iaitu:

1. Pemasa undur: timename=setTimeout("function();",delaytime);
2. Pemasa gelung: timename=setInterval("function();",delaytime);

Function() ialah fungsi acara yang akan dilaksanakan apabila pemasa dicetuskan. Ia boleh menjadi satu fungsi atau beberapa fungsi, atau penyataan JavaScript hanya perlu dipisahkan oleh masa, dalam milisaat.

Pemasa kira detik mencetuskan acara selepas masa yang ditentukan, manakala pemasa gelung mencetuskan acara berulang kali apabila selang tiba Perbezaannya ialah yang pertama hanya berfungsi sekali, manakala yang terakhir berfungsi secara berterusan.

Pemasa undur biasanya digunakan apabila halaman hanya perlu dicetuskan sekali. Contohnya, selepas mengklik butang, halaman akan melompat ke tapak yang sepadan selepas tempoh masa tertentu Ia juga boleh digunakan untuk menentukan sama ada pelawat berada di tapak anda. "Pelanggan lama", jika tidak, anda boleh melompat ke tapak yang sepadan selepas 5 atau 10 saat, dan kemudian beritahu dia bahawa dia boleh menekan butang tertentu di suatu tempat untuk masuk dengan cepat jika dia kembali pada masa hadapan .

Pemasa gelung biasanya digunakan untuk kesan yang perlu dilaksanakan berulang kali pada tapak, seperti bar skrol JavaScript atau bar status Ia juga boleh digunakan untuk mewakili latar belakang halaman dengan gambar salji yang berterbangan. Acara ini perlu dijalankan pada selang waktu.

Kadangkala kami juga ingin mengalih keluar beberapa pemasa tambahan Dalam kes ini, kami boleh menggunakan clearTimeout(nama masa) untuk mematikan pemasa undur, dan menggunakan clearInterval(nama masa) untuk mematikan pemasa gelung.

2. Penyelidikan senaman

1. Pergerakan: gerakan seragam (membuat objek bergerak)

Menggunakan pemasa
Tambahkan kedudukan mutlak pada DIV
offsetLeft

Masalah: Watak henti dicapai pada kedudukan tertentu
Penyelesaian: Buat pertimbangan dan matikan pemasa apabila syarat dipenuhi (simpan pemasa)
Kelajuan menjadi lebih perlahan (biasanya masa tidak berubah, tetapi kelajuan nombor diubah)
Gunakan pembolehubah untuk menyimpan kelajuan

Masalah: Apabila mengambil 7 dan offsetLeft tidak sama dengan 300, div tidak boleh berhenti
Penyelesaian:>=300 //Berhenti di 301

Masalah: Mengklik butang selepas mencapai 300 masih diteruskan
Sebab: Klik butang, laksanakan fungsi dan mulakan pemasa (laksanakan fungsi semasa sekurang-kurangnya sekali)
Penyelesaian: Tambah lain (laksana sebelum mencapai sasaran)

Masalah: Klik berterusan, kelajuan menjadi lebih pantas
Sebab: Setiap kali anda mengklik, pemasa akan bermula Selepas beberapa klik, beberapa pemasa akan berfungsi pada masa yang sama
Penyelesaian: Untuk memastikan bahawa hanya satu pemasa berfungsi pada satu masa, cearlnterval pertama ()

Contoh 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>
Salin selepas log masuk

Kesannya adalah seperti berikut:

Contoh 2, pudar masuk dan keluar: 

<!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>
Salin selepas log masuk

Kesannya adalah seperti berikut:

Syarat henti untuk gerakan seragam

Cukup rapat

Contoh 3, keadaan berhenti untuk gerakan seragam: 

<!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>
Salin selepas log masuk

2. Pergerakan kelajuan berubah (pergerakan penampan)

Perlahan perlahan dan akhirnya berhenti
Semakin jauh jarak, semakin besar kelajuan
Kelajuan ditentukan oleh jarak
Kelajuan=(nilai sasaran-nilai semasa)/faktor penskalaan
Jika tiada faktor penskalaan t dan kelajuan terlalu besar, ia akan sampai ke titik akhir serta-merta. Tiada proses

Masalah: 300 sebenarnya tidak tercapai
Sebab: Kelajuan hanya 0.9 //Piksel ialah kedudukan maksimum yang boleh dipaparkan oleh skrin dan tidak akan dibundarkan
Math.ceil () bulatkan
Math.floor () bulat ke bawah

Masalah: Pergi ke kiri, terlepas blok lain--Math.floor ()
Penghakiman: kelajuan trinokular=kelajuan>0 ? Math.ceil ( kelajuan ): Math.floor ( kelajuan )

Contoh, pergerakan penampan: 

<!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>
Salin selepas log masuk

效果如下：

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>
Salin selepas log masuk

效果如下：

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>
Salin selepas log masuk

效果如下：

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

判断
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{

}
Salin selepas log masuk

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);
}
Salin selepas log masuk

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>
Salin selepas log masuk

应用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>
Salin selepas log masuk

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

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

Label berkaitan：
javascript 运动
sumber：php.cn
Artikel sebelumnya：Ringkasan 15 jQuery plug-ins_jquery yang terkini, paling hangat dan praktikal Artikel seterusnya：Silap mata Bug_javascript untuk menolak bar skrol gambar ke atas apabila mengklik padanya dalam editor kindeditor
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan