[ad_1]
ユーザーの注意を引くには、ユーザーがホバーするかクリックするまでレンジ スライダー ボタンを上下に動かす必要があります。
次に、ホバリングすると、垂直方向の動きが一時停止します。
クリックすると完全に停止します。
範囲スライダーの最大値は 100、最小値は 0、デフォルトは 50 です。
したがって、50 の位置に浮くはずです。
私が試したこと:
次のコードは私が持っているものですが、デフォルトでフローティングする代わりに、範囲スライダーが非表示に表示されます…何か提案はありますか?
HTMLは次のとおりです。
<pre><div id="slider-container"> <input type="range" id="myRange" min="0" max="100" value="50"> </div>
JS は次のとおりです。
var slider = document.getElementById("myRange"); var container = document.getElementById("slider-container"); // Add floating class by default slider.classList.add("floating"); // toggle floating class on hover slider.addEventListener("mouseover", function() { if (slider.classList.contains("floating")) { slider.classList.remove("floating"); } else { slider.classList.add("floating"); } }); // remove floating class on click slider.addEventListener("click", function() { if (slider.classList.contains("floating")) { slider.classList.remove("floating"); } });
CSSは次のとおりです。
#slider-container { position: relative; /* other styling */ } #myRange::-webkit-slider-thumb { transition: all 0.3s ease-in-out; /* other styling */ } #myRange.floating::-webkit-slider-thumb { position: relative; top: -30px; animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } }
解決策 2
コードの問題は、「フローティング」クラスがデフォルトで範囲スライダーに追加されていることですが、スライダーのつまみの初期位置が「フローティング」クラスの位置と一致するように設定されていないため、非表示に見えます。
これを修正するには、デフォルトの変換プロパティを #myRange::-webkit-slider-thumb CSS ルールに追加して、スライダーのつまみの初期位置を「フローティング」クラスの位置と一致するように設定します。
さらに、ホバー時に「フローティング」クラスを切り替える代わりに、別のクラスを追加できます。たとえば、ユーザーがスライダーの上にホバーしたときに追加される「一時停止」としましょう。
JS および CSS コードを更新して目的の動作を実現する方法の例を次に示します。
JS:
var slider = document.getElementById("myRange"); var container = document.getElementById("slider-container"); // Add floating class by default slider.classList.add("floating"); // add paused class on hover slider.addEventListener("mouseover", function() { slider.classList.add("paused"); }); // remove paused class on mouse out slider.addEventListener("mouseout", function() { slider.classList.remove("paused"); }); // remove floating class on click slider.addEventListener("click", function() { slider.classList.remove("floating"); });
CSS:
#slider-container { position: relative; /* other styling */ } #myRange::-webkit-slider-thumb { transition: all 0.3s ease-in-out; transform: translateY(-30px); /* other styling */ } #myRange.floating::-webkit-slider-thumb { position: relative; top: -30px; animation: float 3s ease-in-out infinite; } #myRange.paused::-webkit-slider-thumb { animation-play-state: paused; } @keyframes float { 0% { transform: translateY(-30px); } 50% { transform: translateY(0); } 100% { transform: translateY(-30px); } }
これが役立つことを願っています!
上記のコードは -webkit-slider-thumb セレクターを使用していることに注意してください。すべてのブラウザーで機能するとは限りません。ベンダー プレフィックスも使用できます。
[ad_2]
コメント