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. logistic回归模型

    一.模型简介 线性回归默认因变量为连续变量,而实际分析中,有时候会遇到因变量为分类变量的情况,例如阴性阳性.性别.血型等.此时如果还使用前面介绍的线性回归模型进行拟合的话,会出现问题,以二分类变量为例 ...

  2. shell中&&和||的使用方法

    测试题: [ -z "" ] && echo 0 || echo 1 的结果是多少 看看这两个 && || 的用户  http://blog.csd ...

  3. cf

    Financing a capital project with equity may be a signal to investors that a company's prospects are ...

  4. centos7.0 64位系统 安装PHP 支持 nginx

    1  安装PHP所需要的扩展 yum -y install libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel curl cur ...

  5. ios 打包

    /usr/bin/xcodebuild -scheme Moon -sdk iphoneos -workspace Moon.xcworkspace -configuration Release cl ...

  6. DateFomrat Mask in ASPxTextbox increases width ,How to disable display of dxeErrorCell on ASPxTextBox

    让ASPxTextbox显示yyyy-MM-dd, 需设置 <MaskSettings Mask="yyyy-MM-dd" />.但是会导致ASPxTextbox宽度变 ...

  7. iOS开发Swift篇—（二）变量和常量

    iOS开发Swift篇—(二)变量和常量 一.语言的性能 (1)根据WWDC的展示 在进行复杂对象排序时Objective-C的性能是Python的2.8倍,Swift的性能是Python的3.9倍 ...

  8. SQL Server 中的 NOLOCK 用法

    大家都知道,每新建一个查询,都相当于创建一个会话,在不同的查询分析器里面进行的操作,可以影响到其他会话的查询,极端的情况可能会一直处于阻塞中,哪怕只是一个很简单的查询都“特别慢”. BEGIN TRA ...

  9. Linux Shell Demo

    #!/bin/sh for p in ./* do if test -d $p then touch $p".ok" if test -f $p"/busi.xml&qu ...

  10. 实验一《开发环境的熟悉》&实验二《固件设计》

    20145312&20145338 实验一<开发环境的熟悉>&实验二<固件设计> 合作博客链接:http://www.cnblogs.com/yx2014531 ...