web技术

联系方式

web技术主页 > web技术 >

jQuery应用实例1:定时弹出图片,jquery应用实例

发布时间:2018-12-31 编辑:环亚

jQuery应用实例1:定时弹出图片,jquery应用实例

以前用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%"  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

 

http://www.bkjia.com/jQuery/1297977.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/1297977.htmlTechArticlejQuery应用实例1:定时弹出图片,jquery应用实例 以前用JS实现的:http://www.cnblogs.com/xuyiqing/p/8373064.html 这里利用jQuery实现,并且做得更完善:...

本文源自: 环亚国际

Copyright © 2005-2017 http://www.makilaro.com 环亚国际_环亚国际娱乐_环亚国际娱乐平台_腾讯财经版权所有 环亚国际_环亚国际娱乐_环亚国际娱乐平台_腾讯财经