1、页面引入jQuery文件和bootstrap文件；

2、贴上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="css/bootstrap.css" rel="stylesheet">

    <title>wawa</title>

</head>

<style>

    *{

        margin: 0px;

     }

    .tbDiv{

        height: 10em;

        background-color: rgba(120,120,120,0.5);

    }

    .dropImg{

        width: 14px;

        height: 4em;

        overflow: hidden;

        /*overflow: visible;*/

    }

    .dropImg img{

        width: 100%;

    }

   .wbDiv{

       height: 10em;

       background-color: #31b0d5;

       text-align: center;

   }

</style>

<body>

<div class="container-fluid tbDiv">

</div>

<!--<div class="container-fluid">中</div>-->

<marquee direction="right" behavior="alternate" scrollamount="5"  id="marqueeId" onmouseover="this.stop()"  onmouseout="this.start()">

    <div class="dropImg" id="dropImgId">

        <img src="data:images/dropdown.png">

    </div>

</marquee>

<div class="container-fluid wbDiv navbar-fixed-bottom">

    <a class="btn btn-lg btn-warning" id="catchWawa">抓</a>

</div>

<script src="js/jquery-2.1.4.min.js"></script>

<script>

    var cHeight=$(window).height();

    var isDown=false;

    $('#catchWawa').click(function(){

        if(!isDown){

            document.getElementById("marqueeId").onmouseover();

            slowheight(1);

            document.getElementById("preId").innerHTML="恭喜你！抓到了";

            document.getElementById("catchWawa").innerHTML="收货";

            isDown=true;

        }

        else{

            document.getElementById("marqueeId").onmouseout();

            $('#dropImgId').css('height','4em');

            document.getElementById("catchWawa").innerHTML="下手";

            isDown=false;

        }

    });

    function slowheight(m) {

         $('#dropImgId').css('height',cHeight*m/100);

         m++;

        metest= setTimeout(function() {

            if(m==76){

                $('#catchWawa').css('display','block');

               clearTimeout();

            }else{

                $('#catchWawa').css('display','none');

                slowheight(m);

            }

        },10);

    }

</script>

<pre id="preId">

    1、设置属性

    $(selector).attr('属性名','属性值')

    2、获取当前浏览器可是区域宽度：

    var cWidth=$(window).width();

</pre>

</body>

</html>

Js操作DOM小练习_01的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  3. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  4. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  5. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  6. JS操作DOM对象——JS基础知识（四）

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  7. JS操作DOM常用API总结

    <JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...

  8. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  9. [总结]JS操作DOM常用API详解

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

随机推荐

  1. 【apache】yum 安装Apache(Centos 6.5)

    一.首先在系统上面查询一下是否已经安装了apache [Apache在linux系统里的名字是httpd] rpm    -qa    httpd 如果有返回的信息,则会显示已经安装的软件.如果没有则 ...

  2. 如何搭建一个linux服务器

    1, 首先 下载一个linux server 系统镜像 ubuntu 64bit下载 http://www.ubuntu.com/download/server/thank-you/?version= ...

  3. ABAP认识

    ABAP是一种高级企业应用编程语言(Advanced Business Application Programming),起源于20世纪80年代.经过不断的发展,现在的版本为ABAP/4,SAP R/ ...

  4. guava学习--集合2&Range

    转载:http://www.cnblogs.com/peida/p/Guava_ImmutableCollections.html Table: 当我们需要多个索引的数据结构的时候,通常情况下,我们只 ...

  5. mac系统xcode升级等软件更换appid账户

    删掉xcode 后发现 还是 会存在更新项,点击还是会提示输入之前app id 账号的密码 经过搜索和分析,发现是 Spotlight 在捣鬼,文件和目录删除了,但是索引文件没有被更新. 依次执行下面 ...

  6. redis入门指南-安装redis

    纸上得来终觉浅 绝知此事要躬行 Redis官方不支持window.微软发布了可在redis的分支.不建议使用 但我确实用了. win7 redis2.8.4  php5.6  apache2.4 ht ...

  7. 启动本地Oracle

    net start OracleOraDb10g_home1TNSListenernet start OracleServiceORCL第一个是监听服务第二个是数据库服务

  8. 在服务器端将XML转换成HTML

    以下是在服务器上转换XML文件所需要的简单源代码: <% 'Load the XML set xml = Server.CreateObject("Microsoft.XMLDOM&q ...

  9. MySQL高可用之MHA搭建

    测试环境 节点1 172.16.200.231 6666               master         节点2 172.16.200.27 6666 slave1              ...

  10. HDU1215（筛选法）

    题意:求n的所有因子和: 思路:类似于筛选法求素数的思想,只有第一次的时候了解过它的思想,然后就只是用来求素数,思想的运用反而少: 筛选法求素数: int prime() { memset(vis, ...