HTML5輸入類型=「範圍」圖像的不透明度

Question

我現在有兩個圖像和輸入：

<input type="range" min="0" max="50" value="25"> 

.image_1 { 
    filter: blur(5px); 
    opacity: .8; 
} 

.image_2 { 
    filter: blur(5px); 
    opacity: .8; 
} 

的目標是當滑塊向右移動image_2 {filter: blur(0px); opacity: 1;進入焦點和不透明度滿;同時image_1 {opacity: 0}消失。當滑塊向左移動時，反之亦然。

任何想法或建議，非常感謝。

謝謝你到目前爲止所有的建議和答案。我還沒有完全用提供的解決方案回答我的問題，但我已經接近了。我所做的是我已將oninput=showVal(this.value)添加到我的input元素中。然後我創建了一個功能：

function showVal(newVal) { 
    var img_1 = document.getElementById("img_1"); 
    var img_2 = document.getElementById("img_2"); 

    // code to change blur upon value of slider changing (img_1.style.etc) 
    // unsure how to do 
    console.log(newVal); 
} 

由於所有的很好的答案，我想我已經找到了解決方案。不過，我仍然有調整不透明度的問題。下面是關於它的當前懸而未決的問題：Google Web Designer dynamically adjust opacity in source code

Answer 1

完成。您可能已經注意到，沒有真正的方法可以僅使用CSS來完成此操作。您也可以將來自dom的最大模糊作爲另一個函數參數發送，以使代碼更加模塊化。另外不要忘記添加所有的過濾器實現（我只是因爲時間而添加了webkit的），並且注意IE10，因爲onchange可能有一些問題。見this answer for a fallback

---

EDIT：加入跨瀏覽器濾波器設置兼容性

var config = { 
 
    img1: document.querySelector('.image_1'), 
 
    img2: document.querySelector('.image_2'), 
 
    maxBlurPx: 10 
 
} 
 

 
function getInput(value, max) { 
 
    var sliderPercentage = (value/max).toFixed(2); 
 
    config.img1.style.opacity = 1 - sliderPercentage; 
 
    setBlur(config.img1, (10*sliderPercentage).toFixed(2)); 
 
    config.img2.style.opacity = sliderPercentage; 
 
    setBlur(config.img2, 10-(10*sliderPercentage).toFixed(2)); 
 
    config.img2.style.webkitFilter = "blur(" + (10 - (10 * sliderPercentage).toFixed(1)) + "px)"; 
 
} 
 

 
function setBlur(el, value) { 
 
    if (el.style.hasOwnProperty('filter')) 
 
    el.style.filter = "blur("+value+"px)"; 
 
    if (el.style.hasOwnProperty('webkitFilter')) 
 
    el.style.webkitFilter = "blur("+value+"px)"; 
 
    if (el.style.hasOwnProperty('mozFilter')) 
 
    el.style.mozFilter = "blur("+value+"px)"; 
 
    if (el.style.hasOwnProperty('oFilter')) 
 
    el.style.oFilter = "blur("+value+"px)"; 
 
    if (el.style.hasOwnProperty('msFilter')) 
 
    el.style.msFilter = "blur("+value+"px)"; 
 
}

.image_1, 
 
.image_2 { 
 
    width: 150px; 
 
} 
 
.image_1 { 
 
    filter: blur(5px); 
 
    opacity: .8; 
 
} 
 
.image_2 { 
 
    filter: blur(5px); 
 
    opacity: .8; 
 
}

<input type="range" min="0" max="50" value="25" oninput="getInput(this.value, this.max)"> 
 
<br /> 
 
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_1" /> 
 
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_2" />

Answer 2

更新

如果你有兩張圖片，並希望改變的不透明度，你仍然可以聽爲change事件。

第一幅圖像的不透明度值將是範圍輸入值除以其最大值。第二個圖像的不透明度值將是最大值和當前值之差除以最大值。

換句話說，一幅圖像會變得更加透明，另一幅圖像會變得更加不透明。

var range = document.getElementById("range"); 
 
var imgOne = document.getElementsByClassName("img1")[0]; 
 
var imgTwo = document.getElementsByClassName("img2")[0]; 
 

 
range.addEventListener("change", function() { 
 
    imgOne.style.opacity = this.value/this.max; 
 
    imgTwo.style.opacity = (this.max - this.value)/this.max; 
 
});

.img1, .img2 { 
 
    opacity: 0.5; 
 
}

<input id="range" type="range" min="0" max="50" value="25"><br><br> 
 

 
<img class="img1" height="200" width="200" src="http://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-11.jpg" /> 
 

 
<img class="img2" height="200" width="200" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLg8Fo8YK5SNLqmZUUCjaUh_2Y57jxBgkmjOwxj7dNSui2jZcb" />

Answer 3

var val=25; 
$("input[type='range']").change(function(){ 
    if($(this).val()>val){ 
    $(".image_2").css({ 
     "filter":"blur(0px)", 
     "opacity":"1" 
    }); 
    $(".image_1").css({ 
     "opacity":"0" 
    }); 
    } else { 
    $(".image_1").css({ 
     "filter":"blur(0px)", 
     "opacity":"1" 
    }); 
    $(".image_2").css({ 
     "opacity":"0" 
    }); 
    } 
    val=$(this).val(); 
}); 

我還沒有檢查這個代碼又那麼林不知道這是否會工作..

Answer 4

試試這個片斷。我曾經在我的網站http://stark-cove-24150.herokuapp.com

$(document).ready(function(){ 
$("#designer").mouseenter(function(){ 
    $("#xyz").attr("src", "design.jpg"); 
    $("#face").css("background-image", "url(des2.jpg)"); 
    $("#coder").css("opacity", "0.5"); 
}); 
$("#designer").mouseleave(function(){ 
    $("#xyz").attr("src", "def.jpg"); 
    $("#coder").css("opacity", ""); 
}); 
$("#coder").mouseenter(function(){ 
    $("#xyz").attr("src", "cp2.jpg"); 
     $("#designer").css("opacity", "0.5"); 
     $("#face").css("background-image", "url(coding.jpg)"); 
}); 
$("#coder").mouseleave(function(){ 
    $("#xyz").attr("src", "def.jpg"); 
    $("#face").css("background-image", "url()"); 
    $("#designer").css("opacity", ""); 
}); 
}); 

Answer 5

這裏這段代碼是另一個例子 http://codepen.io/mozzi/pen/qNqJXe

<input id="slider" type="range" min="0" max="50" value="25"> 
<img id="img1" src="http://www.pd4pic.com/images/number-1-red-circle.png" alt="Smiley face" height="200" width="200"> 
<img id="img2" src="http://images.clipartpanda.com/numbers-clipart-1-10-4cb4KkKgi.png" alt="Smiley face" height="200" width="200"> 



    $("#img1").fadeTo(0,0.5); 
    $("#img2").fadeTo(0,0.5) ; 

$("#slider").change(function() { 
    var rangeVal = $("#slider").val(); 
    var val1 = (rangeVal/50); 
    var val2 = ((50-rangeVal)/50); 
    $("#img1").fadeTo(0,val1); 
    $("#img2").fadeTo(0,val2) ; 
}); 

Answer 6

可以創建其中的屬性，值對應於電流的valueinput元件

對象

var imgs = $(".image_1, .image_2"), 
 
    i = { 
 
    "0.4": .6, 
 
    "0.3": .7, 
 
    "0.2": .8, 
 
    "0.1": .9, 
 
    "0": 1, 
 
    "0.6": .4, 
 
    "0.7": .3, 
 
    "0.8": .2, 
 
    "0.9": .1, 
 
    "1": 0 
 
    }, 
 
    blur = { 
 
    "0.5": "5px", 
 
    "0.6": "4px", 
 
    "0.7": "3px", 
 
    "0.8": "2px", 
 
    "0.9": "1px", 
 
    "1": "0px", 
 
    "0.4": "4px", 
 
    "0.3": "3px", 
 
    "0.2": "2px", 
 
    "0.1": "1px", 
 
    "0": "0px" 
 
    }; 
 

 
$("input[type=range]").change(function() { 
 

 
    var n = this.value; 
 
    if (n == .5) { 
 
    imgs.css({ 
 
     "-webkit-filter": "blur(" + blur[n] + ")", 
 
     "-moz-filter": "blur(" + blur[n] + ")", 
 
     "filter": "blur(" + blur[n] + ")" 
 
    }) 
 
    }; 
 
    if (n > .5) { 
 
    imgs.eq(1).css({ 
 
     "opacity": n, 
 
     "-webkit-filter": "blur(" + blur[n] + ")", 
 
     "-moz-filter": "blur(" + blur[n] + ")", 
 
     "filter": "blur(" + blur[n] + ")" 
 
    }); 
 
    imgs.eq(0).css({ 
 
     "opacity": i[n] 
 
    }); 
 
    } else { 
 
    if (n < .5) { 
 
     imgs.eq(1).css({ 
 
     "opacity": n 
 
     }); 
 
     imgs.eq(0).css({ 
 
     "opacity": i[n], 
 
     "-webkit-filter": "blur(" + blur[n] + ")", 
 
     "-moz-filter": "blur(" + blur[n] + ")", 
 
     "filter": "blur(" + blur[n] + ")" 
 
     }) 
 
    } 
 
    } 
 
}).focus()

img { 
 
    transition: all .01s linear; 
 
} 
 

 
.image_1 { 
 
    -webkit-filter: blur(5px); 
 
-moz-filter: blur(5px); 
 
    filter: blur(5px); 
 
    opacity: .5; 
 
} 
 
.image_2 { 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    filter: blur(5px); 
 
    opacity: .5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" step=".1" min="0" max="1" value=".5"> 
 
<img src="http://lorempixel.com/100/100/technics" class="image_1" /> 
 
<img src="http://lorempixel.com/100/100/nature" class="image_2" />