html--图片变化

目标效果:

1.图片为渐变

2.点击上传图片会有变化

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<meta charset="UTF-8">

<title>Document</title>

<style>

body {

background: linear-gradient(to right, red, blue);

transition: background 2s;

}

.colorful {

filter: hue-rotate(90deg);

}

</style>

</head>

<body>

<body>

<img id="myImage" src="your_image.jpg" alt="Your Image">

</body>

</body>

</html>

<script>

document.body.addEventListener('click', function () {

let currentDirection = getComputedStyle(this).backgroundImage.match(/to\s+(\w+)/)[1];

let newDirection = currentDirection === 'right' ? 'left' : 'right';

this.style.backgroundImage = `linear-gradient(to ${newDirection}, red, blue)`;

});

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function () {

$('#myImage').click(function () {

$(this).toggleClass('colorful');

});

});

</script>

图片效果

点击图片后变化

相关推荐
文韬_武略13 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen86813 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
写不来代码的草莓熊14 小时前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab14 小时前
【HTML分离术】
前端·html
文心快码BaiduComate14 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也14 小时前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong95114 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
oh,huoyuyan14 小时前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明200214 小时前
single-spa原理解析
前端·javascript
一枚前端小能手14 小时前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm