一、广告的自动显示与隐藏

<!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>

        /*

            需求：

                1. 当页面加载完，3秒后。自动显示广告

                2. 广告显示5秒后，自动消失。

            分析：

                1. 使用定时器来完成。setTimeout (执行一次定时器)

                2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display

                3. 使用  show/hide方法来完成广告的显示

         */

        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法

        $(function () {

           //定义定时器，调用adShow方法 3秒后执行一次

           setTimeout(adShow,3000);

           //定义定时器，调用adHide方法，8秒后执行一次

            setTimeout(adHide,8000);

        });

        //显示广告

        function adShow() {

            //获取广告div，调用显示方法

            $("#ad").show("slow");

        }

        //隐藏广告

        function adHide() {

            //获取广告div，调用隐藏方法

            $("#ad").hide("slow");

        }

    </script>

</head>

<body>

<!-- 整体的DIV -->

<div>

    <!-- 广告DIV -->

    <div id="ad" style="display: none;">

        <img style="width:100%" src="../img/adv.jpg" />

    </div>

    <!-- 下方正文部分 -->

    <div id="content">

        正文部分

    </div>

</div>

</body>

</html>

二、抽奖

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jquery案例之抽奖</title>

    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>

        /*

            分析：

                1. 给开始按钮绑定单击事件

                    1.1 定义循环定时器

                    1.2 切换小相框的src属性

                        * 定义数组，存放图片资源路径

                        * 生成随机数。数组索引

                2. 给结束按钮绑定单击事件

                    1.1 停止定时器

                    1.2 给大相框设置src属性

         */

        var imgs = ["../img/man00.jpg",

                    "../img/man01.jpg",

                    "../img/man02.jpg",

                    "../img/man03.jpg",

                    "../img/man04.jpg",

                    "../img/man05.jpg",

                    "../img/man06.jpg",

                    ];

        var startId;//开始定时器的id

        var index;//随机角标

        $(function () {

            //处理按钮是否可以使用的效果

            $("#startID").prop("disabled",false);

            $("#stopID").prop("disabled",true);

           //1. 给开始按钮绑定单击事件

            $("#startID").click(function () {

                // 1.1 定义循环定时器 20毫秒执行一次

                startId = setInterval(function () {

                    //处理按钮是否可以使用的效果

                    $("#startID").prop("disabled",true);

                    $("#stopID").prop("disabled",false);

                    //1.2生成随机角标 0-6

                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999

                    //1.3设置小相框的src属性

                    $("#img1ID").prop("src",imgs[index]);

                },20);

            });

            //2. 给结束按钮绑定单击事件

            $("#stopID").click(function () {

                //处理按钮是否可以使用的效果

                $("#startID").prop("disabled",false);

                $("#stopID").prop("disabled",true);

               // 1.1 停止定时器

                clearInterval(startId);

               // 1.2 给大相框设置src属性

                $("#img2ID").prop("src",imgs[index]).hide();

                //显示1秒之后

                $("#img2ID").show(1000);

            });

        });

    </script>

</head>

<body>

<!-- 小像框 -->

<div style="border-style:dotted;width:160px;height:100px">

    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>

</div>

<!-- 大像框 -->

<div

        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">

    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>

</div>

<!-- 开始按钮 -->

<input

        id="startID"

        type="button"

        value="点击开始"

        style="width:150px;height:150px;font-size:22px">

<!-- 停止按钮 -->

<input

        id="stopID"

        type="button"

        value="点击停止"

        style="width:150px;height:150px;font-size:22px">

</body>

</html>

jQuery高级案例的更多相关文章

  1. JQuery高级(一)

    JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing], ...

  2. JQuery高级笔记

    ## 今日内容:     1. JQuery 高级         1. 动画         2. 遍历         3. 事件绑定         4. 案例         5. 插件 ## ...

  3. JQuery 高级

    来源于传智播客老师发的笔记 今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默 ...

  4. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  5. jQuery高级编程

    jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...

  6. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  7. C++/C# 开发高级案例资料一次送！关注加群领取哦！

    目前C/C++.C#.JAVA等语言开发的在线教育比较火爆,但小编所见的讲解高级案例的非常少,切合市场需求的较少.而且针对铁路.公路.建筑.市政.制造业等所有工业计算机辅助设计的开发技术和案例几乎没有 ...

  8. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  9. jquery高级编程学习

    jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof ob ...

随机推荐

  1. html。PROGRESS进度条使用测试

    效果图 : 代码: ----------------------------------- //本文来自:https://www.cnblogs.com/java2sap/p/11199126.htm ...

  2. js 实现 promise

    本文仅用于个人技术记录,如误导他人,概不负责. 本文有参考其他文章,不过地址忘了~~~. ======================================================= ...

  3. Android项目实现Module目录结构分组

    一.背景 项目需求的频繁迭代,新的产品功能在不断添加和延伸,随之带来的是,项目技术复杂度的提升. 近几年来,Android模块化.组件化相关技术得到极速发展,将项目整体进行分层,不同的层次之间依据实际 ...

  4. php 安装xdebug扩展和配置phpstorm断点

    参考链接:安装xdebug扩展和配置phpstorm断点

  5. 通过SharpZipLib实现文件夹压缩以及解压

    代码说明 基于SharpZipLib实现Zip压缩解压,扩展实现文件夹级别压缩解压: 项目源码:MasterChief.DotNet.Infrastructure.Zip Install-Packag ...

  6. leetcode求峰值，js实现

    原题: 最开始是照着提示的思路进行,中规中矩,用时64ms  /** * @param {number[]} nums * @return {number} */var findPeakElement ...

  7. webapi处理OPTIONS请求

    报错1信息 Access to XMLHttpRequest at 'http://localhost:4445/api/v/getmsg' from origin 'http://localhost ...

  8. Delphi - 10进制16进制相互转换

    10进制转16进制 使用IntToHex可以实现十进制到十六进制的转换,注意这里的参数有两个,第一个表示需要被转换的10进制数,第二个表示转换后用几位来显示16进制数. 代码如下: function ...

  9. Dubbo(一)：dubbo-spring-boot-starter

    dubbo-spring-boot-starter English Dubbo Spring Boot Starter.也可以关注dubbo官方的dubbo-spring-boot-project 支 ...

  10. eclipse 标记任务

    eclipse 标记任务 eclipse Task Tags: TODO -用来提醒该标识处的代码有待返回继续编写.更新或者添加.该标签通常在注释块的源文件顶部. FIXME -该标签用来提醒你代码中 ...