HTML网页淡入淡出特效怎样实现呢

淡入淡出特效在网页中很常见，今天小编我就来分享一下它的实现方法。

操作方法

  • 01

    如图，先在HTML页面中书写如下代码，进行页面布局。这里我是布局为两个按钮和一个div。

  • 02

    接着我们预览看看效果，可以看到有“淡入”和“淡出”两个按钮。而div因为我没有设置样式，所以和页面颜色一致，看不出效果。

  • 03

    接着我们设置div样式，方便查看效果。如图，通过width设置宽，通过height设置高，background设置背景颜色。

  • 04

    接着再来看看效果，这次div就清晰的被我们看见了。

  • 05

    接着我们在页眉中引入jQuery插件，注意，不要忘记引用哦。如果没有引用这个插件就无法调用它里面的方法哦。

  • 06

    引入插件之后，再在script标签里面自定义两个函数，分别是fadein和fadeout。

  • 07

    接着我们书写fadein函数的函数体，如图，jQuery("div")表示获取页面的div元素，fadeIn是jQuery中的淡入特效函数，通过它我们就可以实现淡入特效。fadeIn括号里面的参数表示的是元素从不显示状态到显示状态所用时间，2000表示是2000毫秒。 整句话的意思就是找到页面的div元素，然后执行fadeIn函数，这样就可以实现淡入效果了。

  • 08

    而淡出也是一样的，获取div元素，然后执行fadeOut方法，fadeOut表示的是从显示状态到消失状态，也就是淡出效果。

  • 09

    接着我们分别给按钮绑定之前书写的函数，这样，当我们点击按钮之后就会触发淡入淡出效果了哦。

  • 10

    最后，贴出淡入淡出源码给大家参考，注意记得修改jQuery文件的路径。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ width: 200px; height: 200px; background: deepskyblue; } </style> <script src="js/jquery-3.2.1.min.js"></script> <script> function fadein(){ jQuery("div").fadeIn(2000); } function fadeout(){ jQuery("div").fadeOut(2000); } </script> </head> <body> <button onclick="fadein()">淡入</button> <button onclick="fadeout()">淡出</button> <div> </div> </body> </html>

赞 (0)

相关推荐