Изменить цвет градиента при обновлении, но сохранить элемент позиции курсора активным?

У меня есть позиция курсора и градиент, но не могу понять, как изменить цвет градиента, пока элемент позиции курсора все еще работает.Изменить цвет градиента при обновлении, но сохранить элемент позиции курсора активным?

Я пытаюсь изменить цвет градиента при каждом обновлении, выбрав из массива. Вот что теперь:

http://jsfiddle.net/trktqqh6/3/

$(".gradient").mousemove(function(event) { 
 
    var w = $(this).width(), 
 
     pct = 360*(+event.pageX)/w, 
 
     bg = "linear-gradient(" + pct + "deg,#4ac1ff,#795bb0)"; 
 
     $(".gradient").css("background-image", bg); 
 
});

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #292c2f; 
 
    font-family: monospace; 
 
    overflow: hidden; 
 
} 
 
.gradient { 
 
    height: calc(100% - 70px); 
 
    background-image: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: -moz-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: -o-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: -ms-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: linear-gradient(180deg, #4ac1ff, #795bb0); 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
header { 
 
    background: #252525; 
 
    height: 70px; 
 
    line-height: 70px; 
 
} 
 
#currentVal { 
 
    color: #424242; 
 
    font-size: 14px; 
 
    font-weight: 800; 
 
    padding-left: 240px; 
 
} 
 
#currentVal span { 
 
    color: #ccc; 
 
} 
 
#range { 
 
    width: 180px; 
 
    border: 0; 
 
    height: 4px; 
 
    background: #424242; 
 
    outline: none; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 32px; 
 
} 
 
#range .ui-slider-handle { 
 
    position: absolute; 
 
    margin: 0px 0 0 -7px; 
 
    -webkit-border-radius: 100%; 
 
    border-radius: 100%; 
 
    background: #fff; 
 
    border: 0; 
 
    height: 14px; 
 
    width: 14px; 
 
    outline: none; 
 
    cursor: pointer; 
 
} 
 
#range .ui-slider-handle:hover, 
 
#range .ui-slider-handle:focus { 
 
    -webkit-transform: scale(1.1); 
 
    -moz-transform: scale(1.1); 
 
    -o-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
} 
 
#range .ui-slider-range { 
 
    background: #4ac1ff; 
 
}

<div class="gradient"></div>

источник

2016-04-21 K80

вы меняете его на MouseMove ?? и в чем проблема? – RRR

Вы хотели сказать, что вам нужно [это] (http://jsfiddle.net/trktqqh6/73/)? – Harry

Yesss @Harry спасибо – K80

Это довольно просто создать. Просто используйте массив цветов, используйте метод генерации случайных чисел, выберите цвета, соответствующие случайному числу из массива, установите его в градиент и назначьте его элементу.

$(document).ready(function() { 
 
    var colors = [ 
 
    ["red", "yellow"], 
 
    ["blue", "aqua"], 
 
    ["chocolate", "brown"], 
 
    ["steelblue", "lavender"] 
 
    ]; 
 
    var num = Math.round(Math.random() * 3); 
 
    bg = "linear-gradient(180deg," + colors[num][0] + "," + colors[num][1] + ")"; 
 
    $(".gradient").css("background-image", bg); 
 

 
    $(".gradient").mousemove(function(event) { 
 
    var w = $(this).width(), 
 
     pct = 360 * (+event.pageX)/w, 
 
     bg = "linear-gradient(" + pct + "deg," + colors[num][0] + "," + colors[num][1] + ")"; 
 
    $(".gradient").css("background-image", bg); 
 
    }); 
 
});

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #292c2f; 
 
    font-family: monospace; 
 
    overflow: hidden; 
 
} 
 
.gradient { 
 
    height: calc(100% - 70px); 
 
    background-image: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: -moz-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: -o-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: -ms-linear-gradient(270deg, #4ac1ff, #795bb0); 
 
    background-image: linear-gradient(180deg, #4ac1ff, #795bb0); 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
header { 
 
    background: #252525; 
 
    height: 70px; 
 
    line-height: 70px; 
 
} 
 
#currentVal { 
 
    color: #424242; 
 
    font-size: 14px; 
 
    font-weight: 800; 
 
    padding-left: 240px; 
 
} 
 
#currentVal span { 
 
    color: #ccc; 
 
} 
 
#range { 
 
    width: 180px; 
 
    border: 0; 
 
    height: 4px; 
 
    background: #424242; 
 
    outline: none; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 32px; 
 
} 
 
#range .ui-slider-handle { 
 
    position: absolute; 
 
    margin: 0px 0 0 -7px; 
 
    -webkit-border-radius: 100%; 
 
    border-radius: 100%; 
 
    background: #fff; 
 
    border: 0; 
 
    height: 14px; 
 
    width: 14px; 
 
    outline: none; 
 
    cursor: pointer; 
 
} 
 
#range .ui-slider-handle:hover, 
 
#range .ui-slider-handle:focus { 
 
    -webkit-transform: scale(1.1); 
 
    -moz-transform: scale(1.1); 
 
    -o-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
} 
 
#range .ui-slider-range { 
 
    background: #4ac1ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gradient"></div>

источник

2016-04-21 06:06:36 Harry

Изменить цвет градиента при обновлении, но сохранить элемент позиции курсора активным?

ответ

Смежные вопросы