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

<!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. python的import和form...import的区别

    import和form...import的区别 参考链接 骏马金龙 https://www.cnblogs.com/lzc978/p/10105194.html 普通区别 import 使用impor ...

  2. PG数据库获取最近四个小时 使用产品的用户审计信息

    1. 使用关联子查询 2. 使用时间interval SELECT 审计表.COUNT, gspuser.code FROM gspuser JOIN ( SELECT gspaudit1912.us ...

  3. 使用SonarQube和SonarQube Scanner分析项目

    一.概述 SonarQube的安装,请参考链接:https://www.cnblogs.com/xiao987334176/p/12011623.html 配置好sonar的服务端后,接下来就要使用s ...

  4. react的模型：react是如何工作的？

    1.jsx:语法模型,语句构建模型: 2.组件:集合模型,组件管理: 3.vdom:分层模型.渲染管理模型: 4.flux:管道模型.数据模型,状态管理模型: 整体上是一个UI系统从上到下的构建: f ...

  5. 【mysql】windows7 安装mysql5.7 解压缩版 + windows7 安装mysql5.7报错 计算机丢失了MSVCR120.dll解决方法

    1.下载mysql 5.7的zip版解压缩的安装包 在mysql官网:http://dev.mysql.com/downloads/mysql/ 2.解压到本地任意目录,并创建一个mysql_data ...

  6. python每日经典算法题5(基础题)+1(较难题)

    一:基础算法题5道 1.阿姆斯特朗数 如果一个n位正整数等于其各位数字的n次方之和,则称该数为阿姆斯特朗数.判断用户输入的数字是否为阿姆斯特朗数. (1)题目分析:这里要先得到该数是多少位的,然后再把 ...

  7. json串处理2

    请求百度地址坐标:http://api.map.baidu.com/location/ip?ak=y0Yb5ZgGK9blTDbR7Dwh9jGtn6X1YE48&coor=bd09ll&am ...

  8. PHP之面向对象(上)

    PHP 1,定义:动态交互的计算机语言,弱类型语言 静态交互  html  css   js 凡是动态交互的都需要服务器phpstudy 2,使用集成服务器phpstudy apache  服务器 m ...

  9. Windows 计算机取证

    windows安全账号管理(SAM) Unveilling The Password Encryption Process Under Windows –a Practical Attack 上述这篇 ...

  10. Java 之 Stack 集合

    一.Stack:栈 概述 栈是一种先进后出(FILO)或后进先出(LIFO:Last in first out)的数据结构. Stack是Vector的子类,比Vector多了几个方法,它的后进先出的 ...