首先引入 jQuery 库 可以在 bootcdn 这里找
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript渐变动画title> </head> <body> <div id="al6rt">div> </body> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> //TODO </script> </html>
加入样式
<style> #al6rt { position: fixed; width: 200px; height: 50px; color: #FFFFFF; background-color: #000000; text-align: center; line-height: 50px; opacity: 0.8; display: none; } </style>
没加 display: none 之前的的样子是这样的 很丑的一个黑框
<script> function al6rt(str) { $("#al6rt").css({ display: 'block', //垂直居中 距离顶部的距离等于浏览器窗口高度减去黑框的高度除于2 top: ($(window).height() - 50) / 2 + "px", //同理 left: ($(window).width() - 200) / 2 + "px" }) $("#al6rt").html(str) } al6rt("你好") </script>
效果
重点开始了，渐变效果主要使用到 jQuery 为我们封装好的方法 animate
<script> function al6rt(str) { $("#al6rt").css({ display: 'block', //垂直居中 距离顶部的距离等于浏览器窗口高度减去黑框的高度除于2 top: ($(window).height() - 50) / 2 + "px", //同理 left: ($(window).width() - 200) / 2 + "px" }) $("#al6rt").html(str) $("#al6rt").animate({opacity: 0}, 1600) setTimeout(function () { $("#al6rt").css('display', 'none') }, 1600) } al6rt("你好") </script>
再给一个按钮控制提示框的弹出
完整代码:
<html> <head> <meta charset="UTF-8"> <title>JavaScript渐变动画</title> <style> #al6rt { position: fixed; width: 200px; height: 50px; color: #FFFFFF; background-color: #000000; text-align: center; line-height: 50px; opacity: 0.8; display: none; } </style> </head> <body> //添加按钮 <input id="btn" type="button" value="点我"/> <div id="al6rt"></div> </body> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> function al6rt(str) { $("#al6rt").css({ display: 'block', opacity: 0.8, top: ($(window).height() - 50) / 2 + "px", left: ($(window).width() - 200) / 2 + "px" }) $("#al6rt").html(str) $("#al6rt").animate({opacity: 0}, 1600) setTimeout(function () { $("#al6rt").css('display', 'none') }, 1600) } //绑定点击事件 $("#btn").on('click',function() { al6rt("你好") }) </script> </html>
效果
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于