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>

图片效果

点击图片后变化

相关推荐
Doris_20231 分钟前
Python条件判断语句 if、elif 、else
前端·后端·python
Doris_20236 分钟前
Python 模式匹配match case
前端·后端·python
森林的尽头是阳光20 分钟前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
YiHanXii22 分钟前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
zero13_小葵司29 分钟前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_202229 分钟前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
伍哥的传说32 分钟前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
小桥风满袖1 小时前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心1 小时前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode