전구 디밍 효과를위한 노란색 슬라이더 만들기

Question

프런트 엔드 웹 개발시 초보자이며 디밍 및 밝게하는 효과를주는 전구에 연결된 슬라이더를 만드는 작업이 주어진 방법에 따라 슬라이더가 조작됩니다. 누구든지 이걸 도와주세요.

Answer 1

div의 뒤에 배치 된 전구의 이미지를 얻으려면 멋진 CSS를 사용해야하지만, 여기에서 볼 수있는 기본 예제를 작성했습니다 : https://jsfiddle.net/IsaacAdni/q56zkf2t/.

기본적으로, 당신은 너무 폭과 높이를 사용하여 CSS로 견본을 스타일링이 개 된 div를 생성 (아래 도시하지 않음) :

<div id="yellow"></div> 
<div id="swatch"></div> 

는 그런 다음 슬라이더 jQuery를 사용하여 중 하나를합니다

$("#yellow").slider({ 
    orientation: "horizontal", 
    range: "min", 
    max: 255, 
    value: 127, 
    slide: refreshSwatch, 
    change: refreshSwatch 
}); 

이제 슬라이더의 위치가 변경 될 때마다 refreshSwatch 함수가 호출됩니다.

function refreshSwatch() { 
    var yellow = $("#yellow").slider("value"); 
    var alpha = yellow/255; 
    $("#swatch").css("background-color", "rgba(255, 255, 0, " + alpha + ");"); 
} 

은 견본이 어려운 부분이 될 것이다 전구의 이미지 위에 표시 만들기,하지만 난 당신이를 떠날거야 : 우리는 견본의 불투명도를 변경하려면이 기능을 사용할 수 있습니다.