이 기사에서는 썸네일이있는 JS 모방 Tudou Net의 초점 이미지 전환 효과를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<TITLE> 썸네일을 가진 모방 감자 그물의 포커스 사진 전환 효과 </title>
<스타일 유형 = "텍스트/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; }
</스타일>
<script type = "text/javaScript">
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>
<div id = "focus_change">
<div id = "focus_change_list"style = "top : 0; 왼쪽 : 0;">
<ul>
<li> <a href = "// www.vevb.com/"><Img src ="/images/m03.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><Img src ="/images/m04.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><Img src ="/images/m09.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><Img src ="/images/m10.jpg "/> </a> </li>
</ul>
</div>
<div> </div>
<div id = "focus_change_btn">
<ul>
<li> <a href = "#"> <img src = "/images/s3.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s4.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s9.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s10.jpg"/> </a> </li>
</ul>
</div>
</div> <!-focus_change end->
<div style = "높이 : 20px; 배경 : #eee;"> </div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.