给你的网站添加一个“打工人”小狮子 - 开发

广告，本站供应商，淘宝买更便宜！

广告，本站供应商，低价！强烈推荐！

广告，永久8折优惠码：xiunobbs

给你的网站添加一个“打工人”小狮子

tougaoke 二级用户组发布于 6月前

当前打工模式：

睡觉模式：当狮子打呼噜时，点击小狮子则回到首页（或指定页面）

活跃模式：当狮子玩耍时，点击则返回顶部

连击：当小狮子活跃时，双击小狮子则先返回顶部再跳转到首页

演示体验：https://aifeisheng.com/thread-162.htm

需要准备两张图片，然后开工。

好吧，就是一个无情的返回顶部按钮

1、在HTML页面中，将以下代码添加到<head>、<body>标签内：

将图片1和图片2替换为实际的图片文件路径。

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>小狮子动态回到顶部按钮</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <div class="content">  

    </div>  
    <div id="lion" class="lion sleep">  
        <img src="szsj.png" alt="Sleeping Lion" id="sleeping-lion">  
        <img src="shizi.png" alt="Active Lion" id="active-lion" style="display: none;">  
    </div>  
    <script src="script.js"></script>  
</body>   
<!-- 模态框结构 -->  
<div id="refreshModal" class="modal">  
    <div class="modal-content">  
        <span class="close">&times;</span>  
        <p>起飞喽小狮子...回到主页！</p>  
    </div>  
</div>

2、创建一个名为styles.css的文件，并将以下CSS代码粘贴到文件中：

适应了手机端并且在手机端缩小30%

/* styles.css */  
body {  
    margin: 0;  
    padding: 0;  
    /* 确保页面内容足够长以产生滚动效果 */  
    min-height: 200vh;  
}  
  
.lion {  
    position: fixed;  
    bottom: 0px;  
    right: 0px;  
    cursor: pointer; /* 当鼠标悬停在狮子上时改变光标 */  
    width: 80px;  /* 设置宽度为200像素 */  
    height: auto;  /* 高度自动，保持原始宽高比 */
    overflow: hidden; /* 隐藏超出容器的内容，用于呼吸效果 */  
}  
  
.lion img {  
    width: 100%;  
    height: auto;  
}  
  
/* 活动状态的狮子动画 */  
@keyframes activeAnimation {  
    0% {  
        transform: scale(1);  
    }  
    50% {  
        transform: scale(0.95);  
    }  
    100% {  
        transform: scale(1);  
    }  
}  
  
.lion.active #active-lion {  
    display: block;  
    animation: activeAnimation 2s infinite; /* 持续动态效果 */  
}  
  
/* 休眠状态的狮子呼吸效果 */  
@keyframes breathing {  
    0% {  
        opacity: 1;  
        transform: scale(1);  
    }  
    50% {  
        opacity: 0.7;  
        transform: scale(0.95);  
    }  
    100% {  
        opacity: 1;  
        transform: scale(1);  
    }  
}  
  
.lion.sleep #sleeping-lion {  
    display: block;  
    animation: breathing 4s infinite ease-in-out; /* 呼吸效果 */  
}  
  
/* 隐藏非活动状态的狮子图片 */  
.lion.sleep #active-lion,  
.lion.active #sleeping-lion {  
    display: none;  
}


/* 模态框样式 */  
.modal {  
    display: none; /* 默认隐藏模态框 */  
    position: fixed; /* Stay in place */  
    z-index: 1; /* Sit on top */  
    padding-top: 100px; /* Location of the box */  
    left: 0;  
    top: 0;  
    width: 100%; /* Full width */  
    height: 100%; /* Full height */  
    overflow: auto; /* Enable scroll if needed */  
    background-color: rgb(0,0,0); /* Fallback color */  
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
}  
  
.modal-content {  
    background-color: #fefefe;  
    margin: auto;  
    padding: 20px;  
    border: 1px solid #888;  
    width: 80%;  
    max-width: 600px;  
    text-align: center;  
}  
  
.close {  
    color: #aaaaaa;  
    float: right;  
    font-size: 28px;  
    font-weight: bold;  
}  
  
.close:hover,  
.close:focus {  
    color: #000;  
    text-decoration: none;  
    cursor: pointer;  
}





/* 模态框（全屏） */  
.modal {  
    display: none; /* 默认隐藏 */  
    position: fixed; /* Stay in place */  
    z-index: 1; /* Sit on top */  
    padding-top: 100px; /* Location of the box */  
    left: 0;  
    top: 0;  
    width: 100%; /* Full width */  
    height: 100%; /* Full height */  
    overflow: auto; /* Enable scroll if needed */  
    background-color: rgb(0,0,0); /* Fallback color */  
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
}  
  
/* 模态框内容 */  
.modal-content {  
    background-color: rgba(255, 255, 255, 0.9); /* 设置为半透明背景色 */  
    margin: auto;  
    padding: 1px;  
    border: 1px solid #888;  
    width: fit-content; /* 宽度自适应内容 */  
    max-width: 100%; /* 最大宽度不超过100% */  
    position: relative; /* Stay centered vertically */  
    top: 50%;  
    transform: translateY(-50%); /* Center vertically */  
    text-align: center;  
    max-height: 60vh; /* 限制最大高度为视口的80% */  
    overflow: auto; /* 内容过多时允许滚动 */  
}
}  
  
/* 如果需要设置字体颜色，可以在这里添加 */  
.modal-content p,  
.modal-content h1,  
.modal-content h2,  
.modal-content h3,  
.modal-content h4,  
.modal-content h5,  
.modal-content h6 {  
    color: /* 你想要的颜色系字体颜色 */;  
}  
  
/* 去掉关闭按钮的样式 */  
.close {  
    display: none; /* 隐藏关闭按钮 */  
}




/* 在屏幕宽度小于或等于768px时应用以下样式 */  
@media (max-width: 768px) {  
    .lion {  
        width: 56px; /* 原始宽度80px的70% */  
    }  
}

3、创建一个名为script.js的文件，并将以下JavaScript代码粘贴到文件中：

document.addEventListener('DOMContentLoaded', function() {  
    const lion = document.getElementById('lion');  
    const sleepingLion = document.getElementById('sleeping-lion');  
    const activeLion = document.getElementById('active-lion');  
    let lastScrollPosition = 0;  
    let isRefreshing = false; // 防止连续点击导致的多次刷新  
  
    window.addEventListener('scroll', function() {    
        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;  
        const windowHeight = window.innerHeight;  
        const documentHeight = document.documentElement.scrollHeight;  
        const scrollPercent = (scrollPosition / (documentHeight - windowHeight)) * 100;  
  
        if (scrollPercent > 80 && lastScrollPosition <= 80) {  
            // 激活狮子  
            lion.classList.add('active');  
            sleepingLion.style.display = 'none';  
            activeLion.style.display = 'block';  
        } else if (scrollPercent <= 80 && lastScrollPosition > 80) {  
            // 让狮子睡觉  
            lion.classList.remove('active');  
            sleepingLion.style.display = 'block';  
            activeLion.style.display = 'none';  
        }  
  
        lastScrollPosition = scrollPercent;  
    });  
  
  // 获取模态框元素  
    const refreshModal = document.getElementById('refreshModal');  
  
    // 显示模态框的函数  
    function showModal() {  
        refreshModal.style.display = "block";  
    }  
  
    // 隐藏模态框的函数  
    function hideModal() {  
        refreshModal.style.display = "none";  
    }  
  
    // 当用户点击模态框外的区域，关闭它  
    window.onclick = function(event) {  
        if (event.target == refreshModal) {  
            hideModal();  
        }  
    }  
  
    // 修改小狮子的点击事件处理函数  
lion.addEventListener('click', function() {  
    if (activeLion.style.display !== 'block') {  
        // 狮子处于休眠状态  
        if (!isRefreshing) {  
            isRefreshing = true; // 设置标志位，防止连续点击  
  
            // 显示模态框  
            showModal();  
  
            // 使用 setTimeout 模拟一段时间后执行跳转  
            setTimeout(() => {  
                // 隐藏模态框  
                hideModal();  
                // 跳转到首页  
                window.location.href = '/'; // 这里假设首页的URL是'/'  
                // 重置标志位（这行代码实际上在这个上下文中是不必要的，因为页面会立即跳转，但为了保持结构一致性，我保留了它）  
                isRefreshing = false;  
            }, 500); // 500 毫秒后执行，可以根据需要调整时间  
        }  
    } else {  
        // 如果狮子是活动状态，则滚动到页面顶部  
        window.scrollTo({ top: 0, behavior: 'smooth' });  
    }  
});  
  
    // 为模态框的关闭按钮添加点击事件监听器  
    const closeButton = refreshModal.querySelector('.close');  
    closeButton.addEventListener('click', function() {  
        hideModal(); // 点击关闭按钮时隐藏模态框  
    });  
});

有会做插件的大佬可以做个插件