1. 点击图片变换图片颜色
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击图片变换颜色</title>
<script src="./JQuery.js"></script>
<style>
.pic{
width: 600px;
height: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<script>
$(".pic").click(function(){
if($(this).prop("click")){
$(".pic").css("background-color","green")
$(".pic").prop("click",false)
}else{
$(".pic").css("background-color","yellow")
$(".pic").prop("click",true)
}
});
</script>
</body>
</html>2. 背景颜色渐变方向变换
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变方向变化</title>
<style>
body {
height: 100vh;
margin: 0;
transition: background 0.5s;
}
</style>
</head>
<body>
<script>
let direction = "to right";
function changecolor() {
if (direction === "to right") {
document.body.style.background = "linear-gradient(to bottom, pink, white)";
direction = "to bottom";
}
else {
document.body.style.background = "linear-gradient(to right, pink, white)";
direction = "to right";
}
}
document.body.addEventListener("click", changecolor);
</script>
</body>
</html>
页面
扫一扫
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
