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. JVM类加载机制

    一.概述 JVM把描述类的数据从class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是JVM的类加载机制 二.类加载过程 加载—(验证—准备— ...

  2. HDU 1231:最大连续子序列 解题报告

    第一次写博客, 自己总结写出了一道题感觉值得保存. 自己总结的规律:求最大连续子序列, 可以先求包括第N项在内的前N项最大值, (因为每一项都求过后, 前N项最大值最大的那一个元素所连续的序列即为最大 ...

  3. 排序小结(java版)

    一.归并排序 package org.lxh.demo08.b; class Sort { private int[] a; private int n; Sort(int n) { a=new in ...

  4. 关于ASP.NET或VS2005 搭建三层架构的理解

    最近想学习ASP.NET建网站,关于ASP.NET或VS2005 搭建三层架构的理解,网上摘录了一些资料,对于第(2)点的讲解让我理解印象深刻,如下: (1)为何使用N层架构? 因为每一层都可以在仅仅 ...

  5. RSS

    RSS的基本概念 什么是RSS,RSS是在线共享内容的一种简易方式(也叫聚合内容,Really Simple Syndication).网站提供RSS输出有利于让用户获取网站内容的最新更新.用户可以使 ...

  6. 简单通过java的socket&serversocket以及多线程技术实现多客户端的数据的传输，并将数据写入hbase中

    业务需求说明,由于公司数据中心处于刚开始部署的阶段,这需要涉及其它部分将数据全部汇总到数据中心,这实现的方式是同上传json文件,通过采用socket&serversocket实现传输. 其中 ...

  7. WCF vs ASMX WebService

    This question comes up a lot in conversations I have with developers. “Why would I want to switch to ...

  8. 关于设置border的小技巧

    可以在需要的时候,在某个元素下面放一个长或宽为1px,或者你需要的border宽度的 div ,再在这个div 上设置border.按需要调整这个div的位置.

  9. crackme1.exe解密过程

    那今天呢     在西普的做题过程中,发现这么一款.exe,我们来破解一下(当然不是简单的强制爆破,不是简单的打补丁) 我们先用PE  看看   它是用什么写的  有没有加壳什么的 很好   是VC6 ...

  10. B - Encoded Love-letter 字符串的处理

    B - Encoded Love-letter Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...