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

<!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. 【开源监控】Grafana介绍与安装

    Grafana介绍与安装 Grafana介绍 场景:由于业务场景,有多个组织机构.需要在某个组织结构下,完成对本机构下的系统的实时监控以及可视化展示.底层已经用zabbix对监控指标做了数据的采集. ...

  2. 移动端布局方案—vw+rem

    前言 首先你要知道 vw 和 rem 是什么?怎么使用? ①:简单来说 vw 是视口单位,相当于把视口等分成了100,1vw = 1; ②:rem是相对单位,设置根元素 html 的 font-siz ...

  3. 用pyenv管理Python多版本及下载加速方法--Mac上

    原文:https://www.jianshu.com/p/91fc7ecc5e46 先大致介绍下pyenv的安装及配置流程.随后介绍加速下载方法 安装: brew install pyenv 配置 在 ...

  4. VMWare 下安装 Windows XP

    准备工作 安装VMware 我这里安装的是 VMware-workstation-full-12.1.1-3770994.exe 下载Windows XP with SP3 从网上下载的MSDN版本X ...

  5. Python的设计哲学--zen of Python

               Python的设计哲学--zen of Python Beautiful is better than ugly. 优美胜于丑陋 Explicit is better than ...

  6. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 下）

    大家好,在上一篇系列文章里,我们一起学习了路由的基本配置,如何创建路由和传参,本篇文章我们一起学习下 Navigation 导航和路由守卫的相关内容. Navigation 如果要改变当前路径,我们可 ...

  7. JSON文件加注释的7种方法

    JSON文件加注释的7种方法 缺省不能加注释,现实有需求 根据JSON规范(http://www.json.org, RFC 4627, RFC 7159),不支持注释.JSON规范之所以不允许加注释 ...

  8. linux 忘记mysql用户root密码 解决方案

    1.vim /etc/my.cnf[mysqld]skip-grant-tables ##追加此行,跳过权限表, 2.重启mysqlsystemctl restart mysqld 3.mysql 登 ...

  9. 关于Git的用法

    关于Git Git 是一个分布式版本控制软件,与CVS.Subversion一类的集中式版本控制工具不同,它采用了分布式版本库的作法,不需要服务器端软件,就可以运作版本控制,使得源代码的发布和交流极其 ...

  10. 关于两个DIV之间的空白字符

    首先!!!!这个问题应该是去面试前端会经常问到的问题!!! 如,下面这个例子: <!DOCTYPE html> <html lang="zh-CN"> &l ...