js抓取图片颜色

http://www.project-sierra.de/ImageColorPicker/example/

http://www.color-hex.com/color/f9839d


<!doctype html>
 <html>
 <head>
 <title>Test Template</title>
 <script src="../dist/jquery-1.4.4.min.js"type="text/javascript"></script>
 <script src="../dist/jquery-ui-1.8.9.custom.min.js"type="text/javascript"></script>
 <script src="../dist/jquery.ImageColorPicker.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  
 $("#test").ImageColorPicker({
 afterColorSelected: function(event, color){ $("#result_test").text(color); }
 });
  
 $("#test2").ImageColorPicker({
 afterColorSelected: function(event, color){ $("#result_test2").text(color); }
 });
  
 });
 </script>
 <!-- reset CSS -->
 <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css"type="text/css" media="screen"charset="utf-8"/>
 <link rel="stylesheet" href="../dist/ImageColorPicker.css"type="text/css" media="screen"charset="utf-8"/>
 <style type="text/css">
  
 </style>
 </head>
 <body>
 <table>
 <tr>
 <td>
 <img src="test.png"alt="" id="test" />
 <div id="result_test"></div>
 </td>
 <td>
 <img src="test2.jpg"alt="" id="test2" />
 <div id="result_test2"></div>
 </td>
 </tr>
  
  
 </table>
 </body>
 </html>
 


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用JavaScript中的ColorThief库来抓取轮播图片的主色,并使用jQuery或原生JavaScript来实现背景颜色的切换。下面是一个简单的示例代码: HTML部分: ```html <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="slideshow"> <img src="img/slideshow-1.jpg" alt="Slideshow Image 1"> <img src="img/slideshow-2.jpg" alt="Slideshow Image 2"> <img src="img/slideshow-3.jpg" alt="Slideshow Image 3"> </div> ``` CSS部分: ```css nav { background-color: #333; color: #fff; } .slideshow { position: relative; } .slideshow img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow img.active { opacity: 1; } ``` JavaScript部分: ```javascript $(document).ready(function() { // 初始化轮播图 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = $('.slideshow img'); for (i = 0; i < slides.length; i++) { slides[i].classList.remove('active'); } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].classList.add('active'); // 抓取主色并改变导航栏背景颜色 var colorThief = new ColorThief(); var img = slides[slideIndex - 1]; colorThief.getColorAsync(img, function(color) { var rgbColor = 'rgb(' + color[0] + ', ' + color[1] + ', ' + color[2] + ')'; $('nav').css('background-color', rgbColor); }); setTimeout(showSlides, 3000); // 切换时间间隔为3秒 } }); ``` 在这个示例中,我们使用了jQuery来简化DOM操作和CSS样式更改,但你也可以使用原生JavaScript实现相同的效果。注意,这里使用了setTimeout函数来实现轮播图的自动切换,但在实际项目中,你可能会使用更强大和灵活的轮播插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值