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

<!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. Java奇妙之旅day_01

    一 .java程序运行原理 1.首先我们下载JDK,它是一组命令行工具,含有编译.调试.和执行java程序所需要的软件和工具. (1)关于下载我们在这不作赘述,在Oracle官方网站直接下载,一直点击 ...

  2. HashMap 源码分析 基于jdk1.8分析

    HashMap 源码分析  基于jdk1.8分析 1:数据结构: transient Node<K,V>[] table;  //这里维护了一个 Node的数组结构: 下面看看Node的数 ...

  3. IDEA rider 管道模式 经典模式（2）

    1.这里设置为Classic,并打开applicationhost.config将对应应用的 Clr4IntegratedAppPool全部替换为 Clr4ClassicAppPool 2.Confi ...

  4. IScroll Unable to preventDefault inside passive event listener due to target being treated as passive

    最近两天企业微信下IScroll突然无法滚动了,特别慢,之前好好的,发现主要是有红色的Unable to preventDefault inside passive event listener du ...

  5. RabbitMQ实例C#

    驱动组件.NET版本 官网推荐驱动:RabbitMQ.Client https://www.rabbitmq.com/devtools.html#dotnet-dev Connection和Chann ...

  6. Android Studio中的非项目文件及项目目录下的全局搜索

    一.背景 项目开发中,AS(Android Studio)经常会用到通过关键字在项目空间下搜索对应结果.最经常用到的Find in Path.例如打开Find in Path后,可以选中Scope t ...

  7. Git 核心概念

    原文链接 Git的核心概念 聪聪的个人网站 本文不是Git使用教学篇,而是偏向理论方面,旨在更加深刻的理解Git,这样才能更好的使用它,让工具成为我们得力的助手. 版本控制系统 Git 是目前世界上最 ...

  8. 关于CSS特性和选择器

    1层叠  样式冲突的遵循就近原则, 2继承  子代会继承父代的某些属性,例如字体大小,字体颜色 3优先级 !important 权重最高 通配符 * 和 继承的属性 权重为 0 0 0 0 行内样式权 ...

  9. win10家庭版添加本地策略

      在桌面新建一个空文件夹(此处是需要新建文件夹而并非文件),文件夹的名称大家随意即可.如下图所示:   打开刚刚新建的文件夹(双击文件夹则打开文件夹).如下图所示:   在刚刚我们打开的文件夹资源地 ...

  10. 一道Common Lisp 宏的练习题

    这是<ANSI Common Lisp>第10章“宏”的习题第6题: 定义一个宏,接受一变量列表以及一个代码主体,并确保变量在代码主体被求值后恢复 (revert)到原本的数值