很久没有发布文章啦，终于今天有点时间，就在上班前把我之前所写的为了学习JS基础编写的一些使用JS实现的网页常用特效分享给大家；相关的代码我之后也会放到GitHub上，欢迎大家star；
- 首先，实现了最基本的功能：点击不同的按钮切换显示不同的内容；
- 其次，加了定时器，用的是setInterval，当然用setTimeout也是可以的；
- 最后，给body绑定了onmouseover和onmouseout事件,鼠标移入清除定时器，移出又添加定时器。
3.2.1编写网页的内容和样式
- HTML
- CSS
因为都是很基础的，我就主要讲解一下JS部分，后面的案例也一样，请理解。
3.2.2实现特效
注意：onload 事件会在页面或图像加载完成后立即发生，类似与jQuery中的ready事件，推荐都加上，或者也可以使用立即执行函数，这就看个人喜欢；变量最好是在最开始的时候就声明，因为使用var声明的变量会发生“声明提前”，即使你在变量声明之前调用也不会报错；但是在es6中的let就很好的纠正了这一现象，所以我建议大家要养成一个好的习惯，先声明，在调用；
- 一个图片弹窗特效，点击图片会显示大图，并且可以读取图片的alt信息显示出来；点击关闭按钮会关闭弹窗。
4.2.1编写网页的内容和样式
- HTML
- CSS
简单讲解一下CSS代码，部分注解我写在了注释中；那在这里就重点说一下css3中的动画，可以使用@keyframes规则创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成；然后使用animation添加动画。记得要注意兼容性，在webkit内核的浏览器中要加前缀。
- JS
这个特效使用到的js就比较简单，给图片和关闭按钮绑定click事件就可以了。
- 瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应；
- 使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局；
- 使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版；
- 使用window.onscroll，当滚动滚轮时，判断是否显示到最后一张图片，在这之前会从模拟的数据中读取图片地址，再添加到页面里，使得页面可以一直滚动下去，模拟了百度图片的效果；
- 在css中加入了过渡，使得图片位置变化的时候有过渡效果；
本特效的网页内容和样式都很简单就不写在这了，主要讲解一下js代码，下面上代码
排版函数
完整代码请到GitHub上观看，欢迎star
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/5803.html