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. C/C++-----------http协议发送字段，文件，单个和多张图片

    关于c/c++ 网络编程,无论在linux还是windows,要说到自由性,和安全性,socket无疑是比较好的!对于socket,因为它的传输协议只有两种tcp和udp,属于网络层,这里我们不去重点 ...

  2. python中列表的常用方法

    s=[1,2,3] s[3]=12#列表长度小于3时无法给列表赋值 len(s)#列表长 s+s s*5#l列表重复5次 5 in s#判断元素是否在列表中,返回true or false max(s ...

  3. 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型，以及任意节点更新的策略。

    分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...

  4. C#微信公众号接口开发实例-高级接口-申请带参数的二维码

    最近公司涉及到微信绑定用户,做了高级接口-申请带参数的二维码,总结了下微信开发接口.微信接口开发都是除了消息用的xml 回复基本上都是用json的形式传递信息(post/get),开发的方法基本都是一 ...

  5. 1362. Classmates 2

    http://acm.timus.ru/problem.aspx?space=1&num=1362 水题,树形DP 代码: #include<iostream> #include& ...

  6. Solr安装入门、查询详解

    Solr安装入门:http://www.importnew.com/12607.html 查询详解:http://www.360doc.com/content/14/0306/18/203871_35 ...

  7. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  8. CSipSimple结构浅析

    最近做一个VOIP的项目,调研了CSipSimple.都说CSipSimple结构清晰,但是代码下下来看了一下,还是一头雾水,不知从何看起.于是想到从最简单的打电话开始,借助网上一篇博文"C ...

  9. 网站优化之Asp.Net篇<一>

    一>禁用viewstate. 二>禁用动态编译.访问一个Aspx文件时 会编译为一个新的类放在C盘Asp.net临时文件夹下.下次请求不会再编译,会把先前的编译结果返回. 任何对Asp.n ...

  10. 在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件

    在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件 开源程序 浏览:29555 2013年05月02日 文章目录[隐藏] 常见的工作流程 SFTP 安装和使用方法 第一步: ...