js untuk mencapai kemahiran effect_javascript tatal lancar

Contoh dalam artikel ini memperkenalkan fungsi yang diperlukan oleh js untuk mencapai kesan tatal yang lancar, serta kod js utama dan berkongsinya dengan anda untuk rujukan anda. Kandungan khusus adalah seperti berikut

Pemarahan operasi:

Digabungkan dengan pengetahuan yang dipelajari di bawah, buat simulasi latihan lanjutan komprehensif~~ Fungsi umum adalah seperti berikut:

• 1. Selepas klik pada html, gambar akan bergerak dan dipaparkan secara automatik
• 2 Klik arah kiri dan kanan untuk menukar arah pergerakan gambar (tukar nilai kiri, positif atau negatif)
• 3 Selepas tetikus bergerak masuk dan keluar dari imej, imej akan berhenti seketika (setInterval, clearInterval)
• 4 Gerakkan tetikus ke atas gambar dan serlahkannya (a:hover)
• 5 Klik pada gambar kecil, gambar besar di bawah akan berubah
• 6. Kawasan teks berubah apabila gambar berubah (tidak berjaya, perlu diperbaiki)

Kod khusus:

window.onload = function(){

　　//声明部分( 现在的习惯是要写什么声明什么， 一起写容易搞忘了。。也不知道好不好这样)

　　var oDiv = document.getElementById('box');

　　var oUl = oDiv.getElementsByTagName('ul');

　　var oLi = oUl.getElementsByTagName('li');

　　var speed = 2;

　　var timer = null;

　　　

　　//让ul的内容增一倍，从而实现无缝滚动

　　oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

　　oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';

　　//move函数

　　function move(){
　　　　oUl.style.left = oUl.offsetLeft + speed + 'px';
　　　　//控制左
　　　　if(oUl.offsetLeft < -oUl.offsetWidth/2){
　　　　oUl.style.left = 0;
　　　　}

　　　　//控制右
　　　　if(oUl.offsetLeft > 0){
　　　　oUl.style.left = -oUl.offsetWidth/2 + 'px';
　　　　}

　　}

　　　　//图标点击~ 控制移动方向

　　　　var oLeft = document.getElementById('jt_left');
　　　　var oRight= document.getElementById('jt_right');

　　　　oLeft.onclick = function(){
　　　　speed = -2;
　　　　}

　　　　oRight.onclick = function(){
　　　　speed = 2;
　　　　}

　　　　//鼠标移入移出效果

　　　　oDiv.onmouseover = function(){
　　　　　　clearInterval(timer);
　　　　}

　　　　oDiv.onmouseout = function(){
　　　　　　timer = setInterval(move,20);
　　　　}
　　　　timer = setInterval(move,20); 

　　　　//点击获取大图

　　　　

　　　　var aA = oDiv.getElementsByTagName('a');
　　　　for(var i=0;i<aA.length;i++){
　　　　　　aA[i].onclick = function(){
　　　　　　　　showPic(this);
　　　　　　　　return false;
　　　　　　}
　　　　}
　　　　
　　　　function showPic(whichpic){
　　　　　　var source = whichpic.href;
　　　　　　var placeholder = document.getElementById('placeholder');
　　　　　　placeholder.src = source;
　　　　}

}

Untuk kesan penggantian teks terakhir, saya ingin menggunakan gambar untuk membuat nombor yang sepadan dengan kotak teks berubah~~ Ia gagal Saya tidak tahu sebabnya. Saya harap semua orang boleh berikan beberapa cadangan yang baik Walau bagaimanapun, penatalan lancar dalam js masih dilaksanakan seperti biasa.