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

2、贴上代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link href="css/bootstrap.css" rel="stylesheet">
  6.     <title>wawa</title>
  7. </head>
  8. <style>
  9.     *{
  10.         margin: 0px;
  11.      }
  12.  
  13.     .tbDiv{
  14.         height: 10em;
  15.         background-color: rgba(120,120,120,0.5);
  16.     }
  17.  
  18.     .dropImg{
  19.         width: 14px;
  20.         height: 4em;
  21.  
  22.         overflow: hidden;
  23.         /*overflow: visible;*/
  24.  
  25.     }
  26.     .dropImg img{
  27.         width: 100%;
  28.     }
  29.  
  30.    .wbDiv{
  31.        height: 10em;
  32.        background-color: #31b0d5;
  33.        text-align: center;
  34.    }
  35.  
  36. </style>
  37. <body>
  38.  
  39. <div class="container-fluid tbDiv">
  40. </div>
  41.  
  42. <!--<div class="container-fluid">中</div>-->
  43. <marquee direction="right" behavior="alternate" scrollamount="5"  id="marqueeId" onmouseover="this.stop()"  onmouseout="this.start()">
  44.     <div class="dropImg" id="dropImgId">
  45.         <img src="data:images/dropdown.png">
  46.     </div>
  47. </marquee>
  48.  
  49. <div class="container-fluid wbDiv navbar-fixed-bottom">
  50.     <a class="btn btn-lg btn-warning" id="catchWawa">抓</a>
  51. </div>
  52. <script src="js/jquery-2.1.4.min.js"></script>
  53. <script>
  54.     var cHeight=$(window).height();
  55.     var isDown=false;
  56.  
  57.     $('#catchWawa').click(function(){
  58.         if(!isDown){
  59.             document.getElementById("marqueeId").onmouseover();
  60.             slowheight(1);
  61.             document.getElementById("preId").innerHTML="恭喜你！抓到了";
  62.             document.getElementById("catchWawa").innerHTML="收货";
  63.             isDown=true;
  64.  
  65.         }
  66.         else{
  67.             document.getElementById("marqueeId").onmouseout();
  68.             $('#dropImgId').css('height','4em');
  69.             document.getElementById("catchWawa").innerHTML="下手";
  70.             isDown=false;
  71.         }
  72.     });
  73.  
  74.     function slowheight(m) {
  75.          $('#dropImgId').css('height',cHeight*m/100);
  76.          m++;
  77.         metest= setTimeout(function() {
  78.             if(m==76){
  79.                 $('#catchWawa').css('display','block');
  80.                clearTimeout();
  81.             }else{
  82.                 $('#catchWawa').css('display','none');
  83.                 slowheight(m);
  84.             }
  85.         },10);
  86.  
  87.     }
  88.  
  89. </script>
  90.  
  91. <pre id="preId">
  92.     1、设置属性
  93.     $(selector).attr('属性名','属性值')
  94.  
  95.     2、获取当前浏览器可是区域宽度：
  96.     var cWidth=$(window).width();
  97.  
  98. </pre>
  99. </body>
  100. </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. iOS开发Swift篇—（六）流程控制

    iOS开发Swift篇—(六)流程控制 一.swift中的流程控制 Swift支持的流程结构如下: 循环结构:for.for-in.while.do-while 选择结构:if.switch 注意:这 ...

  2. Positive-definite matrix

    In linear algebra, a symmetric n × n real matrix M is said to be positive definite if zTMz is positi ...

  3. Java成员初始化顺序

    //类装载时: 1, 基类static成员 2, 派生类static成员 //创建对象时: 3, 基类构造函数 4, 派生类构造函数

  4. JAVA 接口与抽象类的区别

    abstract class 与interface都是用来定义抽象概念.例如,对于三角形.圆形.矩形这一些具体的概念,形状就是抽象的概念.因为抽象的概念在问题领域没有具体的概念,所以不能够实例化. a ...

  5. 将从数组中取到的字符串赋值给了UIImage导致的错误

    Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFConstantStr ...

  6. 在中心交换机前加入多wan口路由，华为中心交换机的学习

    1.前期经过学习,好多笔记不记得了.要慢慢实践,实战中学习一遍, 2.真实情况看图 3.我们没有接路由器的时候,连接cosle口入中心交换机.telnet上去. 命令行:sys_view undo i ...

  7. SharePoint开发——利用CSOM逐级获取O365中SharePoint网站的List内容

    博客地址:http://blog.csdn.net/FoxDave 本文介绍如何利用SharePoint客户端对象模型(.NET)逐级获取Office 365网站中List的内容,仅仅是示例,没有 ...

  8. 《Java中的不可变类》

    //不可变类举例: /* 下面程序试图定义一个不可变类Person类,但=因为Person类包含一个引用类型的成员变量, 且这个引用类是可变类,所以导致Person类也变成了可变类. */ class ...

  9. 黑马程序员——【Java基础】——Java IO流

    ---------- android培训.java培训.期待与您交流! ---------- 一.IO概述 1.IO:是Input.Output的缩写. 2.特点: (1)用于处理设备间的数据传输. ...

  10. windows核心编程---第三章 内核对象及句柄本质

      本章讨论的是相对抽象的概念,不涉及任何具体的内核对象的细节而是讨论所有内核对象的共有特性. 首先让我们来了解一下什么是内核对象.内核对象通过API来创建,每个内核对象是一个数据结构,它对应一块内存 ...