이전 기사를 계속해서 8 가지 유형의 JS 포커스 캐 러셀 (이전 기사)을 완벽하게 구현하는 것을 배우십시오. 참조를 위해 특정 콘텐츠는 다음과 같습니다.
5. 적시에 위아래로 스크롤합니다
아이디어 :
1. 아이디어 1 : UL의 사본 하나를 복사하지만 스크롤 거리의 절반으로 위치로 돌아갑니다. (대형 웹 사이트는 약간 낮습니다);
2. 아이디어 2 : 상대적 위치를 통해 첫 번째 li를 끝으로 이동 한 다음 Ul과 Li를 위치로 돌려 보냅니다.
window.onload = function () {var obox = document.getElementById ( 'box'); var oul = document.getElementById ( 'ul'); var ali_u = oul.getElementsByTagName ( 'li'); var ool = document.getElementById ( 'ol'); var ali_o = ool.getElementsByTagName ( 'li'); var liheight = ali_u [0] .offsetheight; var inow = 0; // 버튼 var var inow2 = 0; // var timer = null; for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; this.classname = 'active'; // 관계 구축 : 매우 중요한 inow = this.index; inow2 = this.index; startMove (oul, {top :-this.index*liheight}); }}; } timer = setInterval (Torun, 2000); obox.onmouseover = function () {clearinterval (타이머); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; function torun () {if (inow == 0) {// li를 복원하고 ul ali_u [0] .style.position = 'static'; oul.style.top = 0; // inOW2를 inow2 = 0으로 복원하는 것을 잊지 마십시오. } if (inow == ali_o.length-1) {// 첫 번째 li를 마지막 inow = 0으로 이동합니다. ali_u [0] .style.position = 'Relative'; ali_u [0] .style.top = ali_u.length*liheight+'px'; } else {inow ++; } inow2 ++; for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } ali_o [inow] .className = 'active'; startMove (oul, {top : -inow2*liheight}); }};생식 이미지 :
6. 왼쪽과 오른쪽 사이의 원활한 전환의 효과
아이디어 :
1. 절대 포지셔닝 : 첫 번째 LI를 제외한 모든 LI는 오른쪽에 위치하고 인덱스 값을 현재 인덱스와 비교하고 LI의 위치를 찾을 수 있습니다.
2. 모션 스위칭 주파수를 제어하려면 "스위치"또는 "시간 간격"을 추가하십시오!
window.onload = function () {var oul = document.getElementById ( 'ul'); var ali_u = oul.getElementsByTagName ( 'li'); var ool = document.getElementById ( 'ol'); var ali_o = ool.getElementsByTagName ( 'li'); var liwidth = ali_u [0] .offsetWidth; var inow = 0; var bbtn = true; // (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = liwidth+'px'; } for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {if (bbtn) {bbtn = false; for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } this.className = 'Active'; // 왼쪽 및 오른쪽 전환 if (inow <this.index) {// li ali_u [this.index] .style.left = liwidth+'px'; // 현재 li를 이동하여 startMove (ali_u [inow], {left : -liwidth}); } else if (inow> this.index) {ali_u [this.index] .style.left = -liwidth+'px'; startMove (ali_u [inow], {왼쪽 : liwidth}); } startMove (ali_u [this.index], {왼쪽 : 0}, function () {bbtn = true; // 다음 움직임은 현재 움직임이 완료된 후에 만 수행 할 수 있습니다}); // 현재 색인을 inow = this.index에 할당합니다. } // 종료면 스위치}; }};생식 이미지 :
7. 아코디언 효과
1. 아이디어 1 : Li의 너비를 바꾸어 만들 수 있습니다.
2. 아이디어 2 : 첫 번째 항목을 제외한 모든 Li는 동일한 간격으로 배치되며 이벤트가 트리거 된 후에 위치가 등위적으로 변경됩니다.
window.onload = function () {var oul = document.getElementById ( 'ul'); var ali_u = oul.getElementsByTagName ( 'li'); // 첫 번째 항목을 제외한 모든 위치 (var i = 1; i <ali_u.length; i ++) {// Isometric 30px Positioning ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px'; } for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {// index startMove보다 작은 왼쪽 배열 (ali_U [i], {왼쪽 : i*30}); } else {// index startMove보다 큰 모든 올바른 배열 (ali_U [i], {왼쪽 : (470-3*40)+(i-1)*30}; }}}}}}}};생식 이미지 :
8. 아코디언 효과 2
이전에 Li를 고르게 위치하십시오!
window.onload = function () {var oul = document.getElementById ( 'ul'); var ali_u = oul.getElementsByTagName ( 'li'); var num = math.ceil (470/ali_u.length); // 각각의 너비 // (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = num*i+'px'; } for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {startMove (ali_u [i], {왼쪽 : i*30}); } else {startMove (ali_U [i], {왼쪽 : (470-3*40)+(i-1)*30}); }}}}; ali_u [i] .onmouseout = function () {for (var i = 0; i <ali_u.length; i ++) {startMove (ali_u [i], {왼쪽 : num*i}); }}; }};생식 이미지 :
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.