首先引入 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>
效果
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于