小菜鸟的JS练习项目博客

2024-04-24 00:17:44

这周我练习了一个网页动画项目，是由鼠标的滑入和滑出来隐藏和显示书籍的详细信息，代码块如下。
1.body内容：

好吗好的

	好吗好的
	阿三打卢克斯大林时代卡按时打卡十六点按你说的爱丽丝的看守的那是三年大理石肯定会

永无止尽的约会

	永无止尽的约会
	阿斯达克飒飒的拉克丝的阿萨大爱神的箭阿三的马什么的拉克丝的

(1)采用大表格套小表格使其规范整齐 (2)将小表格统一合并单元格并且设定统一的class属性 2.css的样式如下 .t{ display: none; } ps:在默认情况下使小表格隐藏 3.JS的代码如下： function yr(d){ var table=document.getElementsByClassName("t")[d]; table.previousElementSibling.style.display="none"; table.style.display="block"; } //鼠标移入事件 //先获取根据参数d（用于获取相同class属性集的下标）来获取节点 //把小表格上面的标题隐藏掉 //再把小表哥display属性改为 block 使其显示出来 function yc(d){ var table=document.getElementsByClassName("t")[d]; table.previousElementSibling.style.display="block"; table.style.display="none"; } //鼠标移出事件 //先获取根据参数d（用于获取相同class属性集的下标）来获取节点 //把小表格上面的标题显示出来 //再把小表哥display属性改为 none 使其隐藏回复原样。 4.代码做出来的代码效果如下 ![当鼠标划入第一行的效果](https://img-blog.csdnimg.cn/2020080212121222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODIyNzAwNA==,size_16,color_FFFFFF,t_70#pic_center)![鼠标移出第一行，移入第二行的效果](https://img-blog.csdnimg.cn/20200802121306551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODIyNzAwNA==,size_16,color_FFFFFF,t_70#pic_center)

小菜鸟的JS练习项目博客相关推荐

古文字识别助手与众包平台——项目博客五
古文字识别助手与众包平台--项目博客五背景: 由于本项目算法部分为使用python编写,所以需要在springboot中调用外部的python程序进行计算本项目算法评分模块. 在登录功能和社区功能的 ...
vue.js搭建个人博客
博客2.0更新啦博客2.0 博客地址:mangoya.cn 整体样式基本没有变化,主要变化是前后端重构,之前的1.0版本后端为php,并非博主所开发,这次重构调整了数据结构和所熟悉的语言,采 ...
古文字识别助手与众包平台——项目博客三
古文字识别助手与众包平台--项目博客三背景: 由于骨刻文项目存在许多骨刻文的静态图片,为了前端能够快速获取到相应的图片,后端打算再部署一个nginx静态服务器,用来存取在项目中客户上传的各种图片.同 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（四）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(四) 转载于:https://github.com/Meowv/Blog 上篇文章完成了文章增删改的接口和友情链接列 ...
使用 Gatsby.js 搭建静态博客 2 实现分页
原文地址:https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 <- 本文将会介绍如何为初始项目添加分页功能. 理解页面创建原理 ...
古文字识别助手与众包平台——项目博客二
古文字识别助手与众包平台--项目博客二背景: 由于众包算法的系统是为了让更多的人通过描绘图像而获取更多的原始数据,所以在手机端的功能流程不能做的太复杂,否则用户会直接被过于复杂的流程劝退,于是,经过 ...
04. 项目博客之日志
项目博客之日志系统没有日志,就等于人没有眼睛第一,访问日志 access log(server 端最重要的日志) 第二,自定义日志(包括自定义事件.错误记录等) 1. nodejs 文件操作文件 ...
古文字识别助手与众包平台——项目博客一
古文字识别助手与众包平台--项目博客一项目背景: 从目前的考古发掘看,尚未明确证实发现有关夏代的文字资料.但种种迹象表明,夏朝的文字是存在的.山东大学考古美学研究所刘凤君教授在2005年在山东等地发 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（五）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五) 转载于:https://github.com/Meowv/Blog 上篇文章完成了文章详情页数据查询和清除缓存 ...

最新文章

热门文章