JavaScript小练习
每天都学习!
个人主页:shaohuahua.top
展开
-
JavaScript小练习2-网页换肤
题目分析三个皮肤切换按钮的选择用li即可。点击显示白点li中嵌套一个li,onclick时改变子元素li的cssonload当页面加载完成后立即执行一段JavaScript代码。onload 属性在对象已加载时触发。onload 常用在"body"中,一旦完全加载所有内容(包括图像、脚本文件、CSS 文件等),就执行一段脚本。在 HTML 中:<bod...原创 2019-04-10 13:00:42 · 331 阅读 · 0 评论 -
JavaScript小练习3-用循环使三个DIV变色
题目初始为黑色,点击后为红色,再次点击为黑色,以后每次点击一次变色。分析简单的onclick使用。button的居中可以在外套一个p元素,body中让p居中即可。三个DIV块的居中,使用margin和width,注意margin的上下会重叠,但左右不重叠。实现多次点击变色,需要进行判断原色,注意一般的方法(ele.style./cssText)只能读取和修改内联样式,故第一次点击...原创 2019-04-10 13:13:23 · 1336 阅读 · 0 评论 -
JavaScript小练习4-鼠标移入移出改变样式
题目移出:移入:分析思路清晰,onmouseover和onmouseout的使用,注意的地方有:width和height设置的是content的内容,padding和border要注意设置,实现前后大小相同,就要让整个盒子大小一致,即border也进行设置。cssText设置内联样式,cssText=""可清空内联样式。之前没明白onload的作用,这次理解了,之前onload...原创 2019-04-10 23:38:44 · 813 阅读 · 0 评论 -
JavaScript小练习1-控制div属性
题目要实现的效果如图所示:查看演示分析乍一看还以为十分简单,就是简单的点击button时触发的函数来改变样式值,不过做到后面就开始打脸了——“重置”功能。其实要实现重置功能,硬做还是可以的,就是cssText=“整个style表”,但是这么做太暴力了,十分不优雅,结果看了人家的源码真的是佩服的五体投地。首先注意CSS的三种创建方式内联样式/行内样式(inline style)内部...原创 2019-04-09 13:32:25 · 332 阅读 · 0 评论 -
画廊相册—原生JavaScript实现
前言使用原生JavaScript实现照片长廊效果,主要也是为了练手,刚好看到《JavaScript DOM编程艺术》上有这个小demo,看着还挺好看的,就写一写,还顺带总结几个小知识点。效果思路拿到一个设计图,还是先从模块开始划分:导航栏和标题图片区域下方文字显示有了大致框图才能开始逐个突破:标题不说了,导航栏是个典型的水平一级导航栏,之前也做过很多总结整理,注意清除浮动...原创 2019-05-17 23:53:58 · 954 阅读 · 0 评论 -
原生JS:响应式轮播图
文章目录要求最终效果整体思路具体实现HTML文档结构CSS样式JS响应浏览器点击左右箭头翻页显示提示点无缝过渡定时器自动翻转代码整合htmlCSSJS思考和总结更新要求图片自行滚动(规定自左向右滚动)点击左右箭头,实现图片翻页;点击提示圆点,显示不同图片;滚动、翻页和显示都需要过渡效果;响应式:轮播图随着浏览器窗口大小变化而变化;功能整合。最终效果点击预览:全屏响应式轮播图...原创 2019-06-25 13:13:58 · 5372 阅读 · 3 评论