JavaScript——跟随图片变化改变网页背景

目录

基础模板

引入ColorThief库

获取图片主要颜色

实现渐变效果


JavaScript效果——跟随图片变化改变网页背景,效果如下所示:

 

基础模板

首先我们准备基础模板,模板代码如下所示:

<script setup>
import { ref } from 'vue'
const images = ref(['https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF','https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF','https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF','https://t7.baidu.com/it/u=1285847167,3193778276&fm=193&f=GIF'
])
const width = '200px'
const hoverIndex = ref(-1)
async function handleMouseEnter(img, i) {hoverIndex.value = i
}
function handleMouseLeave() {hoverIndex.value = -1
}
</script>
<template><imgv-for="(url, i) in images"crossorigin="anonymous":src="url":style="{width: width,opacity: hoverIndex === -1 ? 1 : i === hoverIndex ? 1 : 0.2}"@mouseenter="handleMouseEnter($event.target, i)"@mouseleave="handleMouseLeave"/>
</template>

基础模板效果如下:

 

引入ColorThief库

要想实现跟随图片变化实现网页背景渐变效果,我们需要获取图片主要的三种颜色,这里我们使用ColorThief库中的getPalette方法,该方法语法格式如下:

const colorThief = new ColorThief()    // 创建ColorThief的实例对象
const colors = colorThief.getPalette(image,colorCount)

其中:

  • image:要提取颜色的图像对象或 URL;

  • colorCount:提取的颜色数量。默认值为 10;

该方法返回颜色谱。

获取图片主要颜色

简单了解了colorThief.getPalette方法后,接下来我们修改鼠标移入方法通过getPalette方法获取图片主要的三种颜色,示例代码如下:

import ColorThief from 'colorthief'    // 引入ColorThief库
const colorThief = new ColorThief()    // 创建ColorThief的实例对象  
async function handleMouseEnter(img, i) {hoverIndex.value = iconst colors = colorThief.getPalette(img, 3)  // 获取颜色谱const [c1, c2, c3] = colors.map((c) => `rgb(${c[0]},${c[1]},${c[2]})`) // 解构出三组rgbconsole.log(c1, c2, c3)
}

当我们鼠标移入图片时,就会打印出图片的主要三种颜色。

实现渐变效果

获取图片的主要颜色后,接下来设置网页的渐变背景,CSS代码如下:

<style>
html {background-image: linear-gradient(to bottom, var(--c1), var(--c2), var(--c3)); // 背景图像background-repeat: no-repeat;   // 不重复height: 100%;
}
</style>

设置网页渐变背景后,接下来在鼠标移入事件中添加如下代码:

  html.style.setProperty('--c1', c1)html.style.setProperty('--c2', c2)html.style.setProperty('--c3', c3)

这样就这样就实现了鼠标移入时,背景发生改变,接下来修改鼠标移除事件,代码如下:

function handleMouseLeave() {hoverIndex.value = -1html.style.setProperty('--c1', '#fff')html.style.setProperty('--c2', '#fff')html.style.setProperty('--c3', '#fff')
}

好了,这样就实现了跟随图片变化改变网页背景了。

公众号:白巧克力LIN

该公众号发布Python、数据库、Linux、Flask、自动化测试、Git、算法、前端等相关文章!

- END -

本文链接:https://my.lmcjl.com/post/1474.html

展开阅读全文

4 评论

留下您的评论.