jQuery应用实例1：定时弹出图片

最新推荐文章于 2020-08-29 07:47:36 发布

weixin_30341735

最新推荐文章于 2020-08-29 07:47:36 发布

阅读量101

点赞数

文章标签： javascript c# ViewUI

原文链接：http://www.cnblogs.com/xuyiqing/p/8379521.html

版权

以前用JS实现的：http://www.cnblogs.com/xuyiqing/p/8373064.html

这里利用jQuery实现，并且做得更完善：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function() {
                //1.书写显示广告图片的定时操作
                time = setInterval("showAd()", 2000);
            });

            //2.书写显示广告图片的函数（各种效果）
            function showAd() {
                //3.获取广告图片，并让其显示
                
                //$("#img2").show(1000);
                //这里是1秒内弹入图片
                
                $("#img2").slideDown(1000);
                //这里是1秒内滑入图片（自上到下）
                
                //$("#img2").fadeIn(4000);
                //这里是4秒内图片逐渐显示（淡入）
                
                
                //4.清除显示图片定时操作
                clearInterval(time);
                //5.设置隐藏图片的定时操作
                time = setInterval("hiddenAd()", 2000);
            }

            function hiddenAd() {
                //6.获取广告图片，并让其隐藏（也有多种效果）
                
                //$("#img2").hide(6000);
                //这里是图片6秒内弹出
                
                $("#img2").fadeOut(6000);
                //这里是6秒内图片淡出
                
                
                //7.清除隐藏图片的定时操作
                clearInterval(time);
            }
        </script>
    </head>

    <body>
        <div>
            <img src="img/1.jpg" width="100%" style="display: none" id="img2" />
        </div>

    </body>

</html>

多种特效，后面的参数是毫秒值：

还有一种方式是toggle，这里单独介绍：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>toggle的使用</title>
        <style>
            div {
                border: 1px solid white;
                width: 500px;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function() {
                $("#btn").click(function() {
                    $("#img1").toggle();
                    //改变显示状态
                    //隐藏则变成显示，显示的变成隐藏状态
                });
            });
        </script>
    </head>

    <body>
        <div>
            <input type="button" value="显示/隐藏" id="btn" /><br />
            <img src="img/1.jpg" width="100%" height="100%" id="img1" />
        </div>
    </body>

</html>

这里可以理解为：display:none的修改为block，display:block的修改为none

转载于:https://www.cnblogs.com/xuyiqing/p/8379521.html

weixin_30341735

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery应用实例1：定时弹出图片

以前用JS实现的：http://www.cnblogs.com/xuyiqing/p/8373064.html这里利用jQuery实现，并且做得更完善：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>&l...
复制链接

扫一扫