训练目标
能够使用jQuery动画效果,完成需求。
训练提示
1.图片样式已经写好,定位右下角
2.先滑入,在滑出,然后淡入。
3.点击关闭按钮,淡出
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>淡入淡出广告</title><script src="/jQ20220215Day44/js/jquery3.6.0.js"></script><style>div{position: absolute;}</style>
</head>
<body>
<script>//创建div button 获取bodyvar div=document.createElement('div')var btn=document.createElement('button')btn.innerHTML='关闭'div.innerHTML='<img src="'+'product1.png" alt="">'+"<button class='btn'> 关闭</button>"var body=document.querySelector('body')//添加到bodybody.appendChild(div)body.appendChild(btn)$(function (){//设置样式$('div').css('background-color','skyblue')$('div').css('border','solid black 1px')$('div').css('position','absolute')$('div').css('right','10px')$('div').css('bottom','10px')$('.btn').css('position',"absolute")$('.btn').css('right',"1px")$('button').click(function (){//当点击按钮时 淡入或淡出$('div').slideToggle(2000)})})</script>
</body>
</html>