[英]Changing the menu color based on the hue of the slider image
我找到了另一个更新,如@Ivan Arambula建议的那样,使用https://github.com/lokesh/color-thief获取图像的RGB。
现在我正在尝试将颜色的RGB与白色和黑色的RGB进行比较,然后根据结果更改菜单颜色,我使用的是@cyang答案的代码,但出现以下错误
(index):240 Uncaught TypeError: Cannot read property 'substr' of undefined
at getContrastYIQ ((index):240)
at HTMLElement.<anonymous> ((index):247)
at HTMLElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLElement.q.handle (jquery-3.2.1.min.js:3)
at Object.trigger (jquery-3.2.1.min.js:4)
at HTMLElement.<anonymous> (jquery-3.2.1.min.js:4)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.trigger (jquery-3.2.1.min.js:4)
at $.Unslider.self.animate (unslider.js:439)
JS代码
<script type="text/javascript">
$(function() {
var colorThief = new ColorThief();
var slider = $('.my-slider').unslider();
slider.on('unslider.change', function(event, index, slide) {
image = slide.find('img')[0];
color = colorThief.getColor(image,5);
// color logic here
function getContrastYIQ(color){
var r = parseInt(color.substr(0,2),16);
var g = parseInt(color.substr(2,2),16);
var b = parseInt(color.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return yiq ;
}
var colors = getContrastYIQ();
if (colors >= 128) {
$('.marker').css('color', 'black');
}else {
$('.marker').css('color', 'white');
}
})
});
</script>
我最初的问题
我使用一个非常简单的jQuery滑块制作了一个滑块。 [ http://idiot.github.io/unslider/][1] 。 我有一个固定的汉堡菜单,我想根据图像的色调更改颜色(白色和蓝色),我进行了很多搜索,但找不到解决方案,到目前为止,我使用的库是https://github.com/kennethcachia/background-check (通过此操作,我成功更改了颜色,但仅在滚动时没有滑动,并且不会切换到其他颜色)。 https://github.com/jamiebrittain/colourBrightness.js (不走运)
https://github.com/lokesh/color-thief (不走运)
如果您能告诉我最好的技术或js库,那就太好了
我正在使用laravel 5.4
我的标头代码是
<header>
<div class="logo">
<h3>Petronius 1926</h3>
</div>
</header>
<!-- menu -->
<button type="button" class="navbar-toggle js-navToggleButton is-open">
<span class="icon-bar icon-bar--first"></span>
<span class="icon-bar icon-bar--middle"></span>
<span class="icon-bar icon-bar--second"></span>
<span class="navbar-toggleTitle">Menu</span>
</button>
<span class="marker-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
<span class="marker"><i class="fa fa-square" aria-hidden="true"></i></span>
<span class="marker-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
<nav class="pushy pushy-left">
<div class="pushy-content">
<div class="diamond">
<button type="button" class="navbar-toggle navbar-toggle--innerNav js-navToggleButton close">
<span class="icon-bar icon-bar--first"></span>
<span class="icon-bar icon-bar--middle"></span>
<span class="icon-bar icon-bar--second"></span>
</button>
</div>
<span class="navbar-toggleTitle">Menu</span>
<div class="marker-inner outer"><i class="fa fa-square" aria-hidden="true"></i></div>
<ul>
<li class="pushy-link"><a href="#home" class="navbar-nav-links-item-link">Home</a></li>
<li class="pushy-link"><a href="#about-us" class="navbar-nav-links-item-link">Who we are</a></li>
<li class="pushy-link"><a href="#story" class="navbar-nav-links-item-link">How is it made</a></li>
<li class="pushy-link"><a href="#collection" class="navbar-nav-links-item-link">Collection</a></li>
<li class="pushy-link"><a href="#contact" class="navbar-nav-links-item-link">Contact</a></li>
</ul>
<div class="marker-inner inverse"><i class="fa fa-square" aria-hidden="true"></i></div>
</div>
</nav>
<div class="site-overlay"></div>
My home page code is
@extends('layouts.master')
@section('styles')
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/unslider.css">
<link rel="stylesheet" href="/css/unslider-dots.css">
@endsection
@section('title')
Home Page
@endsection
@section('content')
<div id="fullpage" class="fullpage-wrapper">
<section id="home" class="my-slider">
<ul>
@foreach( $gallery as $image )
<li><img id="slider-image" src="{!! '/images/'.$image->image !!}" alt="Home page image slider"></li>
@endforeach
</ul>
</section>
</div>
@endsection
@section('scripts')
<!-- Slider -->
<script src="js/unslider.js"></script>
<script src="js/script.js"></script>
$(function() {
var colorThief = new ColorThief();
var slider = $('.my-slider').unslider();
slider.on('unslider.change', function(event, index, slide) {
image = slide.find('img')[0];
color = colorThief.getColor(image,5);
// color logic here
function getContrastYIQ(color){
var r = parseInt(color.substr(0,2),16);
var g = parseInt(color.substr(2,2),16);
var b = parseInt(color.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return yiq ;
}
var colors = getContrastYIQ();
if (colors >= 128) {
$('.marker').css('color', 'black');
}else {
$('.marker').css('color', 'white');
}
</script>
@endsection
使用Color Thief可能会起作用。
$(function() {
var colorThief = new ColorThief();
var slider = $('.my-slider').unslider();
slider.on('unslider.change', function(event, index, slide) {
image = slide.find('img')[0];
color = colorThief.getColor(image);
// color logic here
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.