学习javascript，实现两个功能：
- 显示隐藏div；
- 通过Tween算法实现div显示和隐藏的缓动效果。
参考链接：缓动效果参考文章：JavaScript html js Tween类型
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/hidden.css" media="all" />
<script src="js/hidden.js" type="text/javascript" ></script>
</head>
<body>
<div id="wrapper">
<div class="contents">
<div class="content">
<h1>Structuring our XHTML</h1>
<p>There are plenty of reasons why you might feel the urge to wax verbose on your website's front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page's SEO. But just because your front page is text-heavy doesn't mean it all needs to be visible at once.Today's tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn't require a refresh or navigation to a new page and all your content is still visible to search engine bots that don't pay any attention to CSS or JavaScript.</p>
<p>We'll start with structuring our XHTML appropriately:</p>
<div class="show">show more.</div>
<div class="hidden" style="display:none">
<p>There are three things of importance here: the "show" anchor, the "hide" anchor, and our "hidden" div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I'm then using the classes to set our "default" CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.</p>
<p>You'll notice in the code above that all of our IDs are fairly similar. This is a trick I'm using to simplify our JavaScript, as you'll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.</p>
</div>
</div>
<div class="content">
<h1>Structuring our XHTML</h1>
<p>There are plenty of reasons why you might feel the urge to wax verbose on your website's front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page's SEO. But just because your front page is text-heavy doesn't mean it all needs to be visible at once.Today's tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn't require a refresh or navigation to a new page and all your content is still visible to search engine bots that don't pay any attention to CSS or JavaScript.</p>
<p>We'll start with structuring our XHTML appropriately:</p>
<div class="show">show more.</div>
<div class="hidden" style="display:none">
<p>There are three things of importance here: the "show" anchor, the "hide" anchor, and our "hidden" div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I'm then using the classes to set our "default" CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.</p>
<p>You'll notice in the code above that all of our IDs are fairly similar. This is a trick I'm using to simplify our JavaScript, as you'll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.</p>
</div>
</div>
</div>
</div>
</body>
</html>
javascript代码
document.onclick = click;
function click(ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.className=="show") {
/* 找到兄弟元素 div.show and div.hidden are brothers, their parent is div.content*/
var hid = target.nextSibling;
/* 清除空格回车元素 Clear the space between two div tags. Why could this happen?
* Because we type a space between two div tags for looking indently.*/
if(hid.nodeName=="#text" && /\s/.test(hid.nodeValue)){
hid = hid.nextSibling; /* Get the div#hidtext */
}
if(hid.style.display=='none') {
hid.style.display = "block";
swithcer("block", target);
open(hid);
}
else if(hid.style.display == 'block') {
close(hid);
swithcer("none", target);
}
}
}
var Tween = {
Quad: {
easeOut: function(t,b,c,d) {
return -c*(t/=d)*(t-2) + b;
}
},
Back: {
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
}
}
function open(hid) {
var t=0, b=0, c=150, d=75;
function run() {
hid.style.height = Math.ceil(Tween.Back.easeOut(t,b,c,d)) + "px";
if(t<d) {
t++;
setTimeout(run, 10);
}
}
run();
}
function close(hid) {
var t=0, b=0, c=150, d=75, invald=10;
function run() {
hid.style.height = Math.ceil(Math.abs(150 - Tween.Quad.easeOut(t,b,c,d))) + "px";
if(t<d) {
t++;
setTimeout(run, invald);
}
}
run();
function none() {
hid.style.display = "none";
}
setTimeout(none, invald*(d+30));
}
function swithcer (status, target){
/* if the hidden area becomes visable. switch the button to "hidden area"*/
if(status == "block") {
target.innerHTML = "hidden it.";
target.style.background = "url(\"img/show_hidden.png\") no-repeat scroll 0 -40px #f0c8a0";
}
else if (status == "none") {
target.innerHTML = "show more.";
target.style.background = "url(\"img/show_hidden.png\") no-repeat scroll 0 0 #E4F9F8";
}
}
css代码
p, span {
margin:0;
}
#wrapper {
width:960px;
margin:30px auto;
padding:20px 0;
background:#ececec;
}
.contents {
margin:0 15px;
padding:5px 10px;
border:#feb800 dotted 2px;
}
.content p {
text-indent:20px;
line-height:120%;
margin-top:5px;
}
.show {
width:200px;
padding-left:25px;
margin-top:5px;
font-weight:bold;
background:#E4F9F8 url(../img/show_hidden.png) 0 0 no-repeat;
border:#000 dotted 1px;
cursor:pointer;
}
.hidden {
display:none;
background:#f0c8a0;
margin:5px 10px;
padding:0 5px;
overflow:hidden;
border:black dotted 1px;
}
分享到：
相关推荐
IMG_20250415_160847.jpg
big_dripleaf_stem
内容概要：本文详细介绍了针对国内顶级科技公司（如华为、腾讯）的计算机求职面试内容与技巧。文章首先概述了技术能力考察的重点领域，包括数据结构与算法、操作系统、计算机网络、数据库以及特定编程语言的深入知识点。接着阐述了项目经验和系统设计方面的考察标准，强调了STAR法则的应用和具体的设计案例。此外，还分别描述了两家公司在面试流程上的不同之处，提供了具体的面试技巧，如代码编写的注意事项、项目回答的数据支持方法、系统设计的关键考量因素以及反问面试官的有效问题。最后，给出了避坑指南和资源推荐，帮助求职者更好地准备面试。 适合人群：即将或计划进入华为、腾讯等大型科技企业工作的应届毕业生和技术人员。 使用场景及目标：①帮助求职者了解并准备好技术面试所需的知识点；②指导求职者如何有效地展示自己的项目经验；③提供系统设计题目的解答思路；④传授面试过程中需要注意的行为规范和沟通技巧。 阅读建议：由于文中涉及大量专业知识和技术细节，建议读者在阅读时结合自身背景有选择地进行重点复习，并利用提供的资源链接进一步深化理解。同时，在准备过程中要注意将理论知识与实际操作相结合，多做练习以增强信心。
基于SpringBoot的课程设计选题管理系统，系统包含三种角色：管理员、用户,教师主要功能如下。 【用户功能】 系统首页：浏览课程设计选题管理系统的信息。 个人中心：管理个人信息，查看选题进展和历史记录。 课题信息管理：浏览已有的课题信息。 选题信息管理：查看已选择的选题信息。 自拟课题管理：提出和管理个人自拟的课题，。 系统管理：修改个人密码。 【管理员功能】 系统首页：查看系统整体概况。 个人中心：管理个人信息。 学生管理：审核和管理注册学生用户的信息。 教师管理：审核和管理注册教师用户的信息。 课题信息管理：监管和管理系统中的课题信息，包括发布、编辑、删除等。 课题分类管理：管理课题的分类信息。 选题信息管理：查看学生已选题目的情况，包括审批和管理选题流程。 自拟课题管理：审批和管理学生提出的自拟课题。 系统管理：管理系统的基本设置。 【教师功能】 系统首页：查看系统。 个人中心：管理个人信息。 课题信息管理：浏览已有的课题信息。 课题分类管理：管理课题的分类信息。 选题信息管理：查看学生已选题目的情况。 自拟课题管理：提出和管理个人自拟的课题。 系统管理：校园资讯管理。
橡胶履带牵引车辆改进设计（无极自动变速器方案设计）.rar
剑桥大学发布的GVAR（Global Vector Autoregressive）数据集是用于全球宏观经济分析的重要社科数据资源。该数据集基于GVAR模型开发，旨在量化宏观经济发展对金融机构的影响，并分析全球经济互动。GVAR模型通过处理高维系统中的相互作用，解决了“维度诅咒”问题，适用于国家、地区、行业等多层次的经济分析。数据集包含1979-2016年33个国家的季度数据，可用于冲击情景分析、预测及政策评估。配套的GVAR工具箱（GVAR Toolbox）提供了用户友好的界面，支持MATLAB和Excel操作，便于研究人员开展实际应用。该数据集为经济学、金融学及相关领域的学术研究和政策制定提供了有力支持。
某汽车联合车间工艺布置图.zip
在stm32f407zgt上通过标准库实现w5500tcpserver和client，可以ping通速率不快
基于Python的微信跳一跳游戏程序
j
ElectLines.py
内容概要：本文档是一份针对Python测试开发工程师的算法能力测试卷，涵盖选择题、填空题、编程题和综合题四个部分。选择题考察Python基础知识、数据结构与算法、HTTP协议等；填空题涉及递归、排序、设计模式、HTTP请求方法、测试框架等具体知识点；编程题要求完成字符串反转、链表环检测、二叉树最大深度、两数之和及单元测试类的编写；综合题则包括设计自动化测试框架和实现测试报告生成器，旨在评估考生对Python编程和测试开发的全面掌握程度。 适合人群：具备Python编程基础，从事或计划从事测试开发工作的工程师。 使用场景及目标：①作为招聘流程中的技术考核工具；②帮助工程师自测和提升Python测试开发技能；③为企业内部培训提供标准化的评测标准。 阅读建议：此测试卷不仅考察语法和算法，更注重实际编程能力和解决问题的思路。建议考生在准备过程中多动手实践，熟悉常见的算法和数据结构，并掌握常用的测试框架和工具，如pytest、coverage等。同时，理解每个题目背后的设计意图，有助于更好地应对实际工作中的挑战。
一级减速器成套CAD图【22CAD】.rar
beetroots_stage2
IMG_20250415_104619.jpg
吴萌2262040206.zip
Android开发banner效果，用的是youthbanner的库，你们也可以去找原库demo
该资源为h5py-3.13.0-cp310-cp310-win_amd64.whl，欢迎下载使用哦！
内容概要：本文档提供了一个基于Python的贪吃蛇游戏完整代码示例。代码主要使用了Pygame库来创建游戏窗口、处理图形渲染与事件响应。游戏规则简单明了：玩家控制一条绿色的小蛇在黑色背景的游戏区域内移动，通过键盘方向键改变小蛇行进的方向，目的是吃到红色的食物方块使自身变长。当小蛇碰到边界或者自己的身体时，则判定为游戏失败并提示玩家选择是否重新开始或退出游戏。此外，还设置了帧率限制确保游戏流畅度。 适合人群：有一定Python编程基础的学习者，特别是对Pygame库感兴趣的开发者。 使用场景及目标：①作为初学者练习项目，帮助理解Pygame的基本用法；②可用于教学演示，讲解面向对象编程思想以及事件驱动机制；③为后续开发更复杂的游戏打下良好基础。 阅读建议：建议先熟悉Python语言特性及基本语法，再逐步深入研究本代码中的各个函数功能及其调用关系。同时可以尝试修改参数值（如窗口尺寸、颜色配置等），观察不同设置下的效果变化，从而加深对整个程序的理解。
birch_planks