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. Qt工程转化为Vs工程

    cmd中输入: qmake -tp vc XXX.pro 一般需要将qmake的路径配置到系统环境变量中去...

  2. 弄清UTF8和Unicode

    长期以来,一直对字符串编码认识比较粗略,认为支持"特殊字符"编码就是Unicode.当然,.NET平台上很少需要考虑这类问题,但搞清一些基本概念还是很有好处的. Unicode这个 ...

  3. windows下安装KeystoneJS

    安装参考: http://keystonejs.com/zh/getting-started/ http://jsnoder.com/kjs/quickstart 安装前提条件: 安装 Node.JS ...

  4. Android调用相册拍照控件实现系统控件缩放切割图片

    android 下如果做处理图片的软件 可以调用系统的控件 实现缩放切割图片 非常好的效果 今天写了一个demo分享给大家 package cn.m15.test; import java.io.By ...

  5. Oracle创建，删除用户与表空间

    1.创建表空间与用户 a:创建数据表空间 create tablespace user_data logging datafile 'D:\oracle\product\10.2.0\oradata\ ...

  6. vim常用命令总结 （转）

    vim 选择文本,删除,复制,粘贴   文本的选择,对于编辑器来说,是很基本的东西,也经常被用到,总结如下: v    从光标当前位置开始,光标所经过的地方会被选中,再按一下v结束. V    从光标 ...

  7. surface实例-小球弹起事例

    ball.java package com.example.sufacedemo; import android.graphics.Bitmap; import android.graphics.Bi ...

  8. Opencv 2.4.10 +VS2010 项目配置记录

    http://blog.csdn.net/scottly1/article/details/40978625?utm_source=tuicool 因为工作需要,小小的研究一下Opencv的图像处理, ...

  9. php大力力 [044节] PHP的POST语句一定要大写！！if(!empty($_POST['id'])) {

    早上花了几个小时,寻找错误!!! 不应该这样写 if(!empty($_Post['id'])) { 应该这样写 if(!empty($_POST['id'])) { 万万不能小谢!

  10. IOS网络开发（一）

    1 简易的聊天工具 1.1 问题 Socket的英文原义是孔或者插座的意思,通常也称作套接字,用于描述IP地址和端口,是一个通信链的句柄,本案例使用第三方Socket编程框架AsyncSocket框架 ...