CSS/JS用戶控制着色效果

問題：着色效果使用JS/CSS來模擬用戶屏幕亮度控制？CSS/JS用戶控制着色效果

信息： 通過控制我在想一個簡單的CSS/JavaScript的組合的加入對整個頁面嘲諷亮度控制一個黑暗的陰影效果。

但我不知道如何做到這一點。我想知道是否可以使用文本框來控制最大/最小值的最後一個rgba值，甚至創建一個滑塊，但我在將css連接到js然後返回來控制對方時遇到了一些問題。我沒有任何現有的代碼。

如果您認爲這個問題還不清楚：我的目標是使用js滑塊控制陰影SIMPLY MOCKING屏幕亮度效果。

未來計劃： 當我終於弄清楚如何做的你們我的計劃的幫助下，遮光效果讓用戶控制陰影嘲笑用戶控制屏幕亮度。多謝你們！

只有幫助我找到了目前爲止：添加類似background-color：rgba（0,0,0,0.5）到CSS的東西。這將覆蓋50％不透明度的黑色「表單」中的所有內容，從而使所有內容看起來更暗。這也只適用於支持rgba的瀏覽器。

謝謝堆棧，希望能對一些經驗CSS/JS開發者和幫助我:)

來源

2015-09-17 leyton harrington

這裏是我的嘗試吧：http://codepen.io/IAMZERG/pen/epZZzw

的HTML：

<div class="black"></div> 
<div class="outer-container"> 
<div class="container"> 
    <div class="row"> 
    <h1>Shading effect</h1> 
    <hr> 
    <p>Lorem ipsum dolor sit amet bla bla bla.</p> 
    </div> 
    <div class="row"> 
    <div id="slider"></div> 
    </div> 
</div> 
</div>

的CSS：

.black { 
    background: black; 
    position: fixed; 
    z-index: -1; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#slider { 
    width: 75%; 
} 

.outer-container { 
    min-height: 1500px; 
    background: white; 
}

jQuery的/ jQuery的UI ......的東西這個簡單的可能是矯枉過正：

$("#slider").slider({ 
    values: [100] 

}); 
$(".outer-container").on("slide", function (event, ui) { 
    var opaque = ($("#slider").slider("values")[0]+20)/ 100; 
    console.log(opaque); 
    $(this).css("opacity", opaque); 
});

來源

2015-09-17 02:59:16 IAMZERG

感謝這正是我所尋找的，我不會偷你的代碼。只要從中學習:)謝謝蟲族！ –

竊取我的代碼所有你想要的，但沒有從中學習將是相當侮辱：P – IAMZERG

下面是如何使這一變化基於一系列滑塊不透明的覆蓋一個簡單的例子。

現場演示：

var range = document.getElementById("myRange"); 
 
var overlay = document.getElementById("overlay"); 
 
range.oninput = function() { 
 
    overlay.style.background = "rgba(0, 0, 0, " + (range.value/100) + ")"; 
 
}; 
 
range.oninput();

html, body { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#overlay { 
 
    pointer-events: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<input type="range" id="myRange" value="10" max="70" /> 
 
<div> 
 
    Drag the slider to change the page overlay opacity. 
 
</div> 
 
<div id="overlay"></div>

的jsfiddle版本：https://jsfiddle.net/vw15w0ds/2/

來源

2015-09-17 00:45:58

+1很好的解決方案。無論如何，請注意瀏覽器兼容性：http://stackoverflow.com/a/12920226/5247200 – David

謝謝@Maximillian/david |跨瀏覽器是一個問題，但我可以從演示中學習，並根據我的需要進行調整。（順便說一句：那滑塊真棒，是我所希望的，謝謝隊友！） –

mhm沒問題; c; –

CSS/JS用戶控制着色效果

回答

相關問題