23、JQuery案例（显示/隐藏图片）

最新推荐文章于 2021-10-25 20:02:21 发布

l0510402015

最新推荐文章于 2021-10-25 20:02:21 发布

阅读量517

点赞数 2

分类专栏： 12_JQuery

本文链接：https://blog.csdn.net/l0510402015/article/details/106105012

版权

本文介绍如何利用jQuery实现一个广告图片的显示和隐藏功能。页面加载3秒后图片自动渐显，5秒后渐隐，提供平滑的用户体验。主要涉及到setTimeout定时器和jQuery的show/hide方法。

摘要由CSDN通过智能技术生成

给定一个div模块，模块的功能是展示一幅图片。

广告显示和隐藏 ---
    注意：如果直接使用CSS的display属性，可以显示/隐藏，但是很生硬，所以使用jQuery的显示隐藏功能

    需求：
        1. 当页面加载完，3秒后。自动显示广告
        2. 广告显示5秒后，自动消失。

    分析：
        1. 使用定时器来完成。setTimeout (执行一次定时器)
        2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
        3. 使用  show/hide方法来完成广告的显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            window.setTimeout(adShow , 3000);//记得传入参数是方法时不要写()

            s