jquery中的復雜徑向漸變-有解無憂

我希望創建一個跟隨滑鼠的漸變突出顯示，例如在這個基本理念示例中。

示例中的突出顯示是單色rgba(255,255,255,0.75)。

我想要一個具有多種顏色的徑向漸變，例如 CSS radial-gradient(ellipse at 100% 0%, yellow 0%, orange 50%, red 100%)，但調整為 jQuery 以便它在 function 中作業lightColor = "rgba(255,255,255,0.75)"。

此外，是否可以讓高亮始終在容器內可見，并在容器內簡單地將其錨定到滑鼠上？或者它可能完全是一個不同的功能？非常感謝

$(function() {
        
            var originalBGplaypen = $("#playpen").css("background-color"),
                x, y, xy, bgWebKit, bgMoz, 
                lightColor = "rgba(255,255,255,0.75)",
                gradientSize = 100;
                    
                // Basic Demo
                $('#playpen').mousemove(function(e) {
                
                    x  = e.pageX - this.offsetLeft;
                    y  = e.pageY - this.offsetTop;
                    xy = x   " "   y;
                       
                    bgWebKit = "-webkit-gradient(radial, "   xy   ", 0, "   xy   ", "   gradientSize   ", from("   lightColor   "), to(rgba(255,255,255,0.0))), "   originalBGplaypen;
                    bgMoz    = "-moz-radial-gradient("   x   "px "   y   "px 45deg, circle, "   lightColor   " 0%, "   originalBGplaypen   " "   gradientSize   "px)";
                                        
                    $(this)
                        .css({ background: bgWebKit })
                        .css({ background: bgMoz });
                    
                }).mouseleave(function() {          
                    $(this).css({ background: originalBGplaypen });
                });
    });

#playpen { background: rgb(155,155,155); text-align: center; height: 200px; line-height: 200px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="playpen">Mouse Over</div>

uj5u.com熱心網友回復：

要執行您需要的操作，您可以簡單地更新用于創建徑向漸變的 CSS 以滿足您的需求。唯一的復雜性是將x和y變數連接到正確的位置。

另請注意，您使用的演示 HTML 和 JS 非常過時。jQuery 1.4.4 已經超過 12 年了，不再需要在徑向漸變上使用-webkit或前綴。-moz

最后，在滑鼠與#playpen元素互動之前/之后“錨定”徑向漸變，將其設定為 CSS 中的默認背景，并洗掉mouseleave重新設定原始徑向樣式的事件處理程式。

考慮到所有這些，您的代碼可以更新并簡化為：

jQuery($ => {
  $('#playpen').on('mousemove', function(e) {
    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;
    $(this).css('background', `radial-gradient(ellipse 100px 100px at ${x}px ${y}px, yellow 0%, orange 50%, red 100%`);
  });
});

#playpen {
  background: radial-gradient(ellipse 100px 100px at center, yellow 0%, orange 50%, red 100%);
  text-align: center;
  height: 200px;
  line-height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="playpen">Mouse Over</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410640.html

標籤：

上一篇：如何在單選按鈕更改時隱藏/顯示div

下一篇：彈出懸停未觸發動態影像