이 기사에서는 Tencent Picture Station의 이미지 페이지 회전 버튼을 모방하는 JS의 효과에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
실행 효과의 스크린 샷은 다음과 같습니다.
특정 코드는 다음과 같습니다.
<! docType html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv = "content-type"컨텐츠 = "text/html; Tencent Picture Flip </title> <style type = "text/css"> *{마진 : 없음; 패딩 : 없음; } body {배경 :#000000; } #tip {위치 : 절대; 너비 : 564px; 높이 : 362px; 상단 : -362px; 배경 : url (../ img/tencentimg/tiplayer.png); } #Left {위치 : 절대; 너비 : 101px; 높이 : 95px; 배경 : url (../ img/tencentimg/left.png); 테두리 : 1px 고체 #f2f2f2; 디스플레이 : 없음; 커서 : 손; } #right {위치 : 절대; 너비 : 101px; 높이 : 95px; 배경 : url (../ img/tencentimg/right.png); 테두리 : 1px 고체 #f2f2f2; 디스플레이 : 없음; 커서 : 손; } #mousexPosition {너비 : 30px; 높이 : 20px; 색상 : #ffffff; 디스플레이 : 인라인; } #mouseYposition {너비 : 30px; 높이 : 20px; 색상 : #ffffff; 디스플레이 : 인라인; } #divtop {너비 : 30px; 높이 : 20px; 색상 : #ffffff; 디스플레이 : 인라인; } </style> <script type = "text/javaScript"> function init () {var ml = document.body.clientWidth/2-40; document.getElementById ( "왼쪽"). style.pixeltop = 300; document.getElementById ( "오른쪽"). Style.pixeltop = 300; document.getElementById ( "왼쪽"). style.pixelleft = ml -101*4; document.getElementById ( "오른쪽"). Style.pixelleft = ml + 101*4; var tip = document.getElementById ( "tip"); var inith = (document.body.clientWidth -tip.offsetWidth)/2; document.getElementById ( "tip"). style.left = inith; document.getElementById ( "tip"). style.pixeltop = -362; } 함수 mouseposition (ev) {if (ev.pagex || ev.pagey) {return {x : ev.pagex, y : ev.pagey}; } return {x : ev.clientx + document.body.scrollleft- document.body.clientleft, y : ev.clienty + docum } document.onmouseMove = mousEmove; 함수 mouseMove (e) {e = e || Window.event; var mousepos = mouseposition (e); var mid = document.body.clientWidth/2; document.getElementById ( 'mousexposition'). innerHtml = mousepos.x; document.getElementById ( 'mouseyposition'). innerHtml = mousepos.y; if (mousepos.x <mid) {document.getElementById ( "left"). style.display = "block"; document.getElementById ( "Right"). Style.Display = "None"; } else if (mousepos.x> mid) {document.getElementById ( "right"). style.display = "block"; document.getElementById ( "왼쪽"). style.display = "none"; }} function show () {if (document.getElementById ( "tip"). Style.pixeltOp <80) {document.getElementById ( "tip"). style.pixeltop += 20; document.getElementById ( "divtop"). innerHtml = document.getElementById ( "tip"). style.pixeltop; settimeout ( "show ()", 10)} 함수 hide () {if (documb document.getElementById ( "divtop"). innerHtml = document.getElementById ( "tip"). style.pixeltop; settimeout ( "hide ()", 10)}} </script> </head> <body onload = "init onload ="init () "> <div id ="왼쪽 "onclick ="hide () "> </div> <div id ="right "onclick ="show () ""> </div> <span style = "color : #ffff x-axis : </span> <div. id = "mousexposition"> 0 </div> <br/> <span style = "color : #ffffff"> 마우스 y 축 : </span> <div id = "mouseyposition"> 0 </div> <br/> <span style = "color : #ffffff; font-size : </div id = </div id ="div id = "div id ="div id = "div id ="div id = "div id ="div id = "div-id = "팁"> 0 </div> </body> </html>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.