作业1
1.使用Jquery完成点击图片变换图片颜色
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
<script src="./JQuery.js"></script>
</head>
<body>
<img src="https://p.qpic.cn/mwegame/0/7683b78bc8f4c436978a355f2f1d8ad3/" alt="">
</body>
</html>
<script>
$("img").click(function(){
$(this).css("filter", $(this).css("filter") === "sepia()" ? "" : "sepia(100%)");
});
</script> 运行截图
未点击
点击图片后
作业2
2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#color{
background-image: linear-gradient(to right bottom,green,blue);
height: 100px;
}
</style>
</head>
<body>
<div id="color"></div>
</body>
</html>
<script>
var color = document.getElementById("color")
color.addEventListener('click', function(){
this.style.backgroundImage = 'linear-gradient(to left top, green, blue)';
});
</script>运行截图
未点击
点击后
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
