软件价值16-敲钉子

最新推荐文章于 2024-07-21 12:12:15 发布

dracularking

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量407

点赞数 8

分类专栏：软件价值文章标签： html 敲钉子

本文链接：https://blog.csdn.net/dracularking/article/details/136246544

版权

软件价值专栏收录该内容

16 篇文章 1 订阅

订阅专栏

该篇文章介绍了使用HTML、CSS和JavaScript编写的代码，模拟了锤子敲钉子进入木板的动态效果，通过一系列点击事件和样式调整来展示钉子逐渐深入的过程。

摘要由CSDN通过智能技术生成

模拟用锤子敲钉子，钉入木板。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hammer the nail</title>
<style>
body {
    user-select: none;
    text-align: center;
    background-image: url("wood.webp");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 0 60px;
}

.top {
    position: fixed;
    top: 400px;
    left: 454px;
    height: 20px;
    width: 40px;
    background-color: #777;
    border-radius: 50%;
    box-shadow: 0 3px #555;
    background-image: url("top.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.nail {
    position: fixed;
    top: 406px;
    left: 470px;
    height: 90px;
    width: 9px;
    background-color: #444;
    border-radius: 0 0 55% 55%;
    z-index: -1;
}
</style>
</head>
<body>

<h3>Hammer the nail into the wood</h3>

<div class="top" onclick="myNail()"></div>
<div class="nail"></div>

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
function myNail() { 
    $('.top').css({'transform': 'translateY(15px)'});
    $('.nail').css({'height': '75px'});      
    $('.nail').css({'transform': 'translateY(15px)'});
    $(".top").attr("onclick", "hammer1()");
    $(".nail").css("border-radius", "15px");
}

function hammer1() {
    $('.top').css({'transform': 'translateY(30px)'});
    $(".top").attr("onclick", "hammer2()");
    $('.nail').css({'transform': 'translateY(30px)'});
    $('.nail').css({'height': '60px'});          
}       

function hammer2() {
    $('.nail').css({'height': '50px'});      
    $('.nail').css({'transform': 'translateY(40px)'});
    $('.top').css({'transform': 'translateY(45px)'});
    $(".top").attr("onclick", "hammer3()");
}       

function hammer3() {
    $('.nail').css({'height': '20px'});      
    $('.nail').css({'transform': 'translateY(70px)'});
    $('.top').css({'transform': 'translateY(60px)'});
    $(".top").attr("onclick", "hammer4()");
}       

function hammer4() {
    $('.nail').css({'height': '0px'});      
    $('.nail').css({'transform': 'translateY(60px)'});
    $('.top').css({'transform': 'translateY(75px)'});
    $('.top').css({'box-shadow': '0 1px #555'}); 
}
</script>

</body>
</html>

逻辑解释：

这段程序实现了一个简单的动画效果，模拟了敲钉子的过程。

1. 页面加载后，显示了一个标题 "Hammer the nail into the wood" 和两个元素，一个是代表钉子的 .nail，另一个是代表钉头的 .top。

2. 当用户点击钉头 .top 时，会触发 myNail() 函数。在这个函数中：

.top 元素向下移动了 15px，模拟了锤击的动作。
.nail 元素的高度增加到了 75px，模拟了钉子被敲进木板的效果。
.nail 元素也向下移动了 15px，与 .top 元素同步。
将 .top 元素的点击事件改为 hammer1()。

3. 当用户再次点击锤子时，会触发 hammer1() 函数。在这个函数中：

.top 元素再次向下移动了 15px，模拟了连续的敲击动作。
.nail 元素的高度减少到了 60px，模拟了钉子继续被敲进木板的效果。
将 .top 元素的点击事件改为 hammer2()。

4. 用户连续点击锤子，依次触发 hammer2()、hammer3()、hammer4() 函数，每次都有类似的动作，只是钉子被敲进木板的程度不同，直到最后钉子被完全敲进木板，完成敲钉子的过程。

视频演示：

敲钉子

总结：

这段程序通过一系列的点击事件和样式修改，实现了一个简单的敲钉子动画。

dracularking

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
软件价值16-敲钉子

4. 用户连续点击锤子，依次触发 hammer2()、hammer3()、hammer4() 函数，每次都有类似的动作，只是钉子被敲进木板的程度不同，直到最后钉子被完全敲进木板，完成敲钉子的过程。1. 页面加载后，显示了一个标题 "Hammer the nail into the wood" 和两个元素，一个是代表钉子的。3. 当用户再次点击锤子时，会触发 hammer1() 函数。这段程序通过一系列的点击事件和样式修改，实现了一个简单的敲钉子动画。这段程序实现了一个简单的动画效果，模拟了敲钉子的过程。
复制链接

扫一扫