JS 모방 감자 그물의 축소판으로 초점 사진의 전환 효과를 실현하는 방법

저자：Eve Cole 업데이트 시간：2025-05-30 13:00:04

이 기사에서는 썸네일이있는 JS 모방 Tudou Net의 초점 이미지 전환 효과를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

코드를 다음과 같이 복사하십시오.

<헤드>

<스타일 유형 = "텍스트/CSS">

/ * 리셋 스타일 */

* {마진 : 0; 패딩 : 0; 단어 브레이크 : 브레이크-alf; }

신체 {배경 : #fff; 색상 :#333; 글꼴 : 12px/1.6em Helvetica, Arial, Sans-Serif; }

H1, H2, H3, H4, H5, H6 {Font-Size : 1EM; }

A {색상 :#039; 텍스트 결정 : 없음; }

A : 호버 {Text-Decoration : Underline; }

ul, Li {List 스타일 : 없음; }

필드 셋, img {국경 : 없음; }

em, strong, cit, th {font 스타일 : 정상; 글꼴 중량 : 정상; }

/ * focus_change 스타일 */

#focus_change {위치 : 상대; 너비 : 450px; 높이 : 295px; 오버플로 : 숨겨진; 여백 : 20px 0 1px 60px; }

#focus_change_list {위치 : 절대; 너비 : 1800px; 높이 : 295px; }

#focus_change_list li {float : 왼쪽; }

#focus_change_list li img {너비 : 450px; 높이 : 295px; }

.focus_change_opacity {위치 : 절대; 너비 : 450px; 높이 : 70px; 상단 : 225px; 왼쪽 : 0; 배경 :#000; 필터 : 알파 (불투명도 = 50); -Moz-opacity : 0.5; 불투명도 : 0.5; }

#focus_change_btn {위치 : 절대; 너비 : 450px; 높이 : 65px; 상단 : 225px; 왼쪽 : 0; }

#focus_change_btn ul {padding-left : 5px; }

#focus_change_btn li {디스플레이 : 인라인; 플로트 : 왼쪽; 여백 : 0 15px; 패딩 탑 : 12px; }

#focus_change_btn li img {너비 : 76px; 높이 : 50px; 국경 : 2px Solid #888; }

#focus_change_btn .current {배경 : URL (/uploadfile/200901/1/6c164133877.gif) no-Repeat 37px 8px;}

#focus_change_btn .current img {Border-Color : #eee; }

</스타일>

function $ (id) {return document.getElementById (id); }

함수 이동 (ElementId, final_x, final_y, interval) {

if (! document.getElementById)가 false를 반환합니다.

if (! document.getElementById (elementId)) false를 반환합니다.

var elem = document.getElementById (ElementId);

if (elem.movement) {

클리어 타임 아웃 (elem.movement);

}

if (! elem.style.left) {

elem.style.left = "0px";

}

if (! elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseint (elem.style.left);

var ypos = parseint (elem.style.top);

if (xpos == final_x && ypos == final_y) {

진실을 반환하십시오.

}

if (xpos <final_x) {

var dist = math.ceil ((final_x -xpos)/10);

xpos = xpos + dist;

}

if (xpos> final_x) {

var dist = math.ceil ((xpos -final_x)/10);

XPOS = XPOS -DIST;

}

if (ypos <final_y) {

var dist = math.ceil ((final_y -ypos)/10);

ypos = ypos + dist;

}

if (ypos> final_y) {

var dist = math.ceil ((ypos -final_y)/10);

ypos = ypos- dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "MoveElement ( '+elementId+"', "+final_x+", "+final_y+", "+interval+") ";

elem.movement = settimeout (반복, 간격);

}

함수 classnormal () {

var focusbtnlist = $ ( 'focus_change_btn'). getElementsByTagName ( 'li');

for (var i = 0; i <focusbtnlist.length; i ++) {

FocusBtnlist [i] .className = '';

}

함수 focuschange () {

var focusbtnlist = $ ( 'focus_change_btn'). getElementsByTagName ( 'li');

FocusBtnList [0] .OnMouseOver = function () {

MoveElement ( 'focus_change_list', 0,0,5);

classnormal ()

focusbtnlist [0] .className = 'current'

}

focusbtnlist [1] .onmouseover = function () {

MoveElement ( 'focus_change_list', -450,0,5);

classnormal ()

focusbtnlist [1] .classname = 'current'

}

focusbtnlist [2] .onmouseover = function () {

MoveElement ( 'focus_change_list', -900,0,5);

classnormal ()

FocusBtnlist [2] .className = 'current'

}

focusbtnlist [3] .onmouseover = function () {

MoveElement ( 'focus_change_list', -1350,0,5);

classnormal ()

FocusBtnlist [3] .className = 'current'

}

setInterval ( 'autofocuschange ()', 5000);

var atuokey = false;

함수 autofocusChange () {

$ ( 'focus_change'). onmouseover = function () {atuokey = true}

$ ( 'focus_change'). onmouseout = function () {atuokey = false}

if (atuokey) 반환;

var focusbtnlist = $ ( 'focus_change_btn'). getElementsByTagName ( 'li');

for (var i = 0; i <focusbtnlist.length; i ++) {

if (focusbtnlist [i] .className == 'current') {

var currentNum = i;

}

if (currentNum == 0) {

MoveElement ( 'focus_change_list', -450,0,5);

classnormal ()

focusbtnlist [1] .classname = 'current'

}

if (currentNum == 1) {

MoveElement ( 'focus_change_list', -900,0,5);

classnormal ()

FocusBtnlist [2] .className = 'current'

}

if (currentNum == 2) {

MoveElement ( 'focus_change_list', -1350,0,5);

classnormal ()

FocusBtnlist [3] .className = 'current'

}

if (currentNum == 3) {

MoveElement ( 'focus_change_list', 0,0,5);

classnormal ()

focusbtnlist [0] .className = 'current'

}

Window.onload = function () {

FocusChange ();

}

</스크립트>

</head>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div> <!-focus_change end->

</body>

</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.