오늘 저는 두 가지 더 특수 효과를 코딩했습니다. 하나는 기본 입력 [유형 = 범위]으로 만들어졌고 다른 하나는 완전히 사용자 정의됩니다. 다음은 완전한 코드 및 데모입니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <tip {position : Absolute; 상단 : 30px; 왼쪽 : 0; 오른쪽 : 0; 너비 : 200px; 높이 : 160px; 마진 : 자동; 테두리 : 1px 단단한 회색; 배경색 : Cornsilk; } #tip div {위치 : 상대; 너비 : 100%; 높이 : 80px; 국경-바닥 : 1px 단단한 회색; } .out {위치 : 상대; 왼쪽 : 16%; 디스플레이 : 인라인 블록; 국경 : 2px Solid RoyalBlue; 마진-탑 : 20px; 너비 : 130px; 높이 : 20px; 배경색 : Lightgoldenrodyellow; } .in {display : 블록; 높이 : 20px; 라인 높이 : 20px; 텍스트 정렬 : 맞습니다. 색상 : 흰색; 너비 : 50%; 배경 이미지 : 선형 등급 (오른쪽, 파우더 블루 0%,#336699 50%, 빨간색 0px 1px rgba (0, 0, 0, 0, 0, 0, 0, 0px 1px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 0, 0, 삽입, 0px 1px rgba (0, 0, 0, 0, 0, 삽입, 0px 1px rgba (0, 0, 0, 0, 0, 0.6) 삽입; 배경색 : Lightskyblue; Border-Radius : 15px; width : 60%; -webkit-appearance;-Moz-Apporance : 없음; 입력 [범위 ": webkit-slider {-webkit-appearance : 없음; 1px Box-Shadow; LightkyBlue} {inline-block; getElementByID ( 'range'); Inner.width = value+'%'; var value = var a = parsefloat (window.getcomputedStyle (outcomputedStyle). (a + 'px'; Console.log ( '+a+', '+값); value.innerhtml = value * a+'px'; Cleartimeout (ID)}; id = "inner1"> 50 </span> </span> <입력 id = "범위"유형 = "범위"min = "0"0 "100"Step = "1"value = "50"> </div> <div id = "d2"> <input id = "btn1"type = "button"value = "<"> < "outer2"> id = "btn2"type = "button"value = ">"> </div> 버튼을 0.5 초 동안 누르십시오. </form> </body> </html>첫 번째 구현은 매우 간단하므로 설명하지 않겠습니다. 코드를 직접 읽으십시오.
여기서 우리는 주로 두 번째 예제의 구현을 소개합니다.
요구 사항이나 다른 사람들의 특수 효과를 볼 때 다른 사람들의 코드를 보려고 서두르지 마십시오. 먼저 그것에 대해 생각해보십시오. 어떻게 달성해야합니까? 아이디어를 먼저 내놓으십시오
이 특수 효과의 구현 원리 :
1. 스팬 내의 스팬 중첩;
• 외부 스팬 : 디스플레이 너비, 높이, 테두리, 배경이 없습니다
• 내부 범위 : 높이는 외부와 동일하며 너비는 기본적으로 50%입니다. 먼저 배경색을 선형 구배로 설정합니다
2. 버튼의 onclick 이벤트는 비교적 간단합니다. 내부의 스팬 너비를 변경하려면 클릭하고 숫자를 표시하십시오.
3. 버튼이 OnMousEdown이면 타이머를 시작하고 500ms 후에 기능 변경 기능을 실행하십시오. 변경 함수는 Settimeout으로 다시 호출되는 함수입니다. 애니메이션 효과를 달성하기 위해 16.7ms없이 한 번 다시 호출합니다.
난이도 분석 :
1.이 문장 var var a = parsefloat (wind
outer2.style.width를 사용하는 경우 초기 값을 얻는 데 사용됩니다.
그만한 가치가 없습니다. 물론 고정 값을 설정할 수도 있습니다. 예를 들어 여기서는 다음과 같이 설정할 수 있습니다.
var a = 1.3,
getComputedStyle 메소드는 IE9에 따라 지원되지 않습니다.
IE의 요소 객체에는 현재 스타일 속성이 있습니다.
2.이 문장
btn1.onmouseup = function () {cleartimeout (id1);
클리어 타임 아웃 (ID)};
매우 중요합니다. 그것 없이는 OnMoSedown이 onclick이 트리거되기 전에 트리거됩니다. 500ms 후에 실행되기 시작하면 외부 타이머가 실행됩니다.
3. 다른 것은 어렵지 않습니다.
이 예제는 실제로 중간 디스플레이를 기사, 사진 등으로 바꾸고 버튼을 사용자 정의로 바꾸는 등의 다른 많은 응용 프로그램으로 확장됩니다. 효과가 시원해집니다!
내가 글쓰기에 대해 나쁜 것이 있다고 생각한다면, 그것을 지적하십시오!
JavaScript 실제 전투 (Native Range 및 Custom Special Effects)의 위의 간단한 예는 내가 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.