如何在 jQuery 中创建一个平坦的长阴影范围答案

【问题标题】：How Create a Flat, Long Shadow range in jQuery如何在 jQuery 中创建一个平坦的长阴影范围
【发布时间】：2014-10-07 16:11:03
【问题描述】：

我想像这样创建一个范围滑块text-shadow：

text-shadow: rgb(18, 128, 106) 1px 1px,
    text-shadow: rgb(18, 128, 106) 1px 1px,                                                                                            
    rgb(18, 128, 106) 2px 2px,
    rgb(18, 128, 106) 3px 3px,
    rgb(18, 128, 106) 4px 4px,
    rgb(18, 128, 106) 5px 5px,
    rgb(18, 128, 106) 6px 6px,
    rgb(18, 128, 106) 7px 7px,
    rgb(18, 128, 106) 8px 8px,
    rgb(18, 128, 106) 9px 9px,
    rgb(18, 128, 106) 10px 10px,
    rgb(18, 128, 106) 11px 11px,
    rgb(18, 128, 106) 12px 12px,
    rgb(18, 128, 106) 13px 13px,
    rgb(18, 128, 106) 14px 14px,
    rgb(18, 128, 106) 15px 15px,
    rgb(18, 128, 106) 16px 16px,
    rgb(18, 128, 106) 17px 17px,
    rgb(18, 128, 106) 18px 18px,
    rgb(18, 128, 106) 19px 19px,
    rgb(18, 128, 106) 20px 20px,
    rgb(18, 128, 106) 21px 21px,
    rgb(18, 128, 106) 22px 22px,
    rgb(18, 128, 106) 23px 23px,
    rgb(18, 128, 106) 24px 24px,
    rgb(18, 128, 106) 25px 25px,
    rgb(18, 128, 106) 26px 26px,
    rgb(18, 128, 106) 27px 27px,
    rgb(18, 128, 106) 28px 28px,
    rgb(18, 128, 106) 29px 29px,
    rgb(18, 128, 106) 30px 30px,
    rgb(18, 128, 106) 31px 31px,
    rgb(18, 128, 106) 32px 32px,
    rgb(18, 128, 106) 33px 33px,
    rgb(18, 128, 106) 34px 34px,
    rgb(18, 128, 106) 35px 35px,
    rgb(18, 128, 106) 36px 36px,
    rgb(18, 128, 106) 37px 37px,
    rgb(18, 128, 106) 38px 38px,
    rgb(18, 128, 106) 39px 39px,
    rgb(18, 128, 106) 40px 40px,
    rgb(18, 128, 106) 41px 41px,
    rgb(18, 128, 106) 42px 42px,
    rgb(18, 128, 106) 43px 43px,
    rgb(18, 128, 106) 44px 44px,
    rgb(18, 128, 106) 45px 45px,
    rgb(18, 128, 106) 46px 46px,
    rgb(18, 128, 106) 47px 47px,
    rgb(18, 128, 106) 48px 48px,
    rgb(18, 128, 106) 49px 49px,
    rgb(18, 128, 106) 50px 50px;

使用这个 jQuery 代码：

$('#Range').change(function () {
    $('.divwidth').css({ boxShadow: this.value + 'px' });
});

this.value = 范围值。

HTML：

<input type="range" name="amountRange" id="Range" value="250" min="0" max="500" step="1" oninput="this.form.amountInput.value=this.value" />
<input type="text" name="amountInput" id="textnumber" min="0" max="500" step="1" value="250" oninput="this.form.amountRange.value=this.value" /><span>px</span>

【问题讨论】：

所以，当input 元素的值发生变化时，您想生成/应用box-shadows 的范围吗？从0px 0px 到什么值？ input的值改了？
我想要 html 范围更改文本阴影 px 更改范围输入
你要使用什么 HTML？顺便说一句，不要发布您的所有代码，我们不需要一百行重复代码中的每一行。缩写，并使您的代码简洁。
我想创建这样的东西sandbox.juan-i.com/longshadows
太好了，你的 HTML 是什么？

标签： jquery css function range shadow

【解决方案1】：

猜测你想要一些东西 like this，尽管它并不完全清楚，因为你在文本中使用了 box-shadow 和 text-shadow。

$("input").change(function() {
    var val = $(this).val();
    $("input").not(this).val(val);
    $("#the-text").css({"textShadow":"rgb(18, 128, 106) "+val+"px "+ val+"px"});
});

【讨论】：

谢谢你，我想创造这样的东西sandbox.juan-i.com/longshadows

【解决方案2】：

这是小提琴

JS Fiddle

我不确定你想要什么 box-shadow 或 text-shadow 所以在小提琴中创建了 3 个 range x-axis y-axis 和 blur 用于 box shadow

function boxshadow() {
        a = $('#Range').val() + 'px'
        b = $('#Range1').val() + 'px'
        c = $('#Range2').val() + 'px'

        $('.test').css({ 'box-shadow': a + ' ' + b + ' ' + c + ' ' + '#888888'})

        $('.text').css({ 'text-shadow': a + ' ' + b +' ' + '#FF0000'})
}

boxshadow()

$('input[type=range]').on('change', function () {
    boxshadow()
})

【讨论】：

一开始我想创建一个文本 Flat, Long Shadow slide With html range 但我不明白如何开始使用我的代码如果你能展示我如何开始使用我的代码，我会很高兴:)