JQuery - 드래그 가능한 DIV가 이미지간에 희미 해지는가?

여기 내 문제에 관한 JSFIDDLE입니다.JQuery - 드래그 가능한 DIV가 이미지간에 희미 해지는가?

슬라이더를 왼쪽 및 오른쪽으로 연설 거품이있는 상태로 드래그하려고합니다. 그 뒤에있는 막대의 파란색과 녹색 색상 사이에서 슬라이드 할 때 슬라이더가 녹색 끝에 도달하고 opacity이 image 1 is set to 0% and image 2 to 100%에 도달 할 때까지 불투명도는 image 1 to 90%이고 불투명도는 image 2 to 10%, image1 80% image 2 20%, image 1 70% - image2 30% 등으로 설정됩니다. 그러면 슬라이더가 계속 슬라이딩함에 따라 오른쪽, from green to red, . 다음 이미지로 반복하십시오.

나는 내가 원하는 것을하는 것처럼 보이는 http://jqueryui.com/demos/slider/을 보았습니다. 그러나 슬라이더의 X 위치를 얻는 방법을 모르고 이미지 1, 이미지 2, 이미지 3, 이미지 4의 불투명도에 적용합니다.

슬라이더가 960px wide이므로 960/4 = 240, 슬라이더를 따라 각각 240 pixels에 대해 불투명도를 0-100 %로 설정해야합니다.

먼저 jquery에서 가능한가요? 둘째, 누구나 코드를 사용하거나 도움이 될만한 링크를 보여줄 수 있습니까?

출처

2012-10-05 williamsongibson

예에서 이미지를 볼 수 없습니다./ – Nicholas

예 동일한 슬라이더를 사용했습니다. 나는 너에게 유용한 힌트를 줄 수있어! – MJQ

이미지가 서로의 위에 있습니다. @Antimated는 Z-INDEX로 정렬됩니다. 그래서 상단 이미지의 불투명도를 50 %로 설정하면 아래 이미지의 50 %가 표시됩니다. – williamsongibson

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Slider</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
     $("#slider").slider({ 

     range: "min", 
       value: 0, 
       min: 0, 
       max: 10, 

       slide: function (event, ui) { 
        var r = (ui.value); 
        $("#img1").css({'opacity':r/10}); 
        $("#img2").css({'opacity':1-(r/10)}); 
} 
    }) 
    }); 
    </script> 
</head> 
<body> 
<img id = "img1" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px"> 
<img id = "img2" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px"> 
<div id="slider" style = "height:10px; width:400px" ></div> 
</body> 
</html>

출처

2012-10-05 13:21:36 MJQ

안녕하세요, MJQ,이 예제를 주셔서 감사합니다,이 경우에만 2 이미지를 작동합니다. 이 이미지를 4 개 이미지로 확장하는 방법을 잘 모르겠습니다. – williamsongibson

확장 가능. 속성을 변경하는 동안 논리를 만들고 추가하십시오. 그게 너야! – MJQ

안녕 MJQ, 나는 jQuery에 아주 새롭다. "논리 만들기"가 무슨 뜻인지 말해 줄 수 있니? – williamsongibson

JQuery - 드래그 가능한 DIV가 이미지간에 희미 해지는가?

답변

관련 문제