样例效果
js代码
let main = function() {
// 递归渲染动画
let last_timestep = 0;
let cansel = true; // true:正在渲染， false: 停止渲染
let fun_id;
// 递归函数
function f(timestep) {
// console.log(timestep - last_timestep);
last_timestep = timestep;
$('.box1').width($('div').width() + 1);
if ($('.box1').width() < ($("body").width() * 0.6))
fun_id = requestAnimationFrame(f);
}
requestAnimationFrame(f);
// 单击停止渲染
$('.box1').click(function() {
if (cansel === true) {
console.log("停止渲染")
cansel = cancelAnimationFrame(fun_id);
cansel = false; // 已经停止渲染
}
});
// 右键继续渲染
document.oncontextmenu = function(e){
if (cansel === false) {
console.log("已取消，继续渲染");
requestAnimationFrame(f);
cansel = true;
}
return false;//阻止浏览器的默认弹窗行为
}
$('.box1_btn').on("click", () => {
$('.box1').width(300);
});
}
export {
main
};
html及其css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
<title>JS库的使用</title>
<style>
.box1 {
background-color: rgb(214, 208, 91);
width: 300px;
height: 300px;
margin: 20px auto;
color: rgb(28, 25, 8);
text-align: center;
/* line-height: 300px; */
box-sizing: border-box;
display: flex;
justify-content: space-between ;
align-items: center;
}
.box1_left {
height: 300px;
width: 20px;
background: linear-gradient(to left, rgb(225, 240, 13), rgb(214, 193, 56));
}
.box1_right {
height: 300px;
width: 20px;
background: linear-gradient(to right, rgb(225, 240, 13), rgb(214, 193, 56));
}
.box1_btn {
width: 100px;
height: 40px;
line-height: 40px;
border-radius: 15px;
background-color: #5fba7d;
text-align: center;
margin: 20px auto;
color: rgb(255, 255, 255);
}
.box1_text {
font-size: larger;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1_left"></div>
<span class="box1_text">左键暂停，右键展开</span>
<div class="box1_right"></div>
</div>
<div class="box1_btn">复 位</div>
<script type="module">
import {main} from "/homework/static/js/js2.js";
main();
</script>
</body>
</html>
