分析效果实现原理——鼠标提示框

样式：div的display

事件:onmouseover,onmouseout

编写JS的流程

布局：HTML+CSS

属性：确定需要修改哪些属性

事件：确定用户做哪些操作（产品设计），确定要在什么样的事件夏进行修改，是点击还是移入移出。

编写JS：在事件中，用JS来修改页面元素的样式

鼠标提示框的简单练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #div1{
        width:200px;
        height:100px;
        background:#ccc;
        border:1px solid #999;
        display:none;/*该区域一开始是隐藏的*/
        }
</style>
</head>
    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'"/>
    <div id="div1">
    为了您的安全
    </div>
<body>
</body>
</html>

然后引入函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #div1{
        width:200px;
        height:200px;
        background:red;
        }
</style>
<script>
    function toGreen()
    {
    document.getElementById('div1').style.width='300px';
    document.getElementById('div1').style.height='300px';
    document.getElementById('div1').style.background='green';
        }
    function toRed()
    {
    document.getElementById('div1').style.width='200px';
    document.getElementById('div1').style.height='200px';
    document.getElementById('div1').style.background='red';
        }
</script>
</head>

<body>
    <div id="div1" onmouseover="toGreen()"
    onmouseout="toRed()">
    </div>
</body>
</html>

其实这段代码中函数里的好多代码是重复的，看上去太烦太多，可以利用变量来简化。

【JS学习笔记】第一个JS效果——鼠标提示框的更多相关文章

  1. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  2. Node.js学习笔记(1) - Node.js简介

    近期在看一些Node.js的知识,看完后觉得,一些前面的东西忘记了,于是整理一下,方便自己查阅,也希望对学习Node.js的朋友有些帮助: 当然以下只是我个人的观点和理解,不喜勿喷,也望大神指教. 一 ...

  3. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  4. Node.js学习笔记(2) - Node.js安装及入门hello world

    今天来简单的记录一下Node.js的安装配置以及简单的入门 一.Node.js的安装 1.windows下的安装 windows下的安装很简单,只需要去官网http://nodejs.org中,找到w ...

  5. Node.js学习笔记(七) --- Node.js的静态文件托管、路 由、EJS 模板引擎、GET 、POST

    1 . Nodejs 静态文件托管静态 web 服务器封装 2 . 路由 官方解释:  路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等)组成的, ...

  6. Node.js学习笔记(八) --- Node.js的路由模块封装

    1 .模块化的方式封装 整理中… 2 .封装仿照 express 的路由整理中…

  7. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. return 使用和闭包

    1.return 使用 案例一: var a=1; for(var b=0; b<10; b++){ return b; }; sonsole.log(b)//返回为空 个人认为此处左右与为全局 ...

  2. Bootstrap 使用清单组组件创建价格表

    价格表是销售产品或服务的任何网站的主要成分之一.即使 Boortstrap 3(与之前的版本一样)没有直接提供价格表组件,但是它提供了列表组组件.设计该组件的目的是为了渲染复杂的定制内容.利用这个特征 ...

  3. hibernate 获取实体的表名、主键名、列名(转载+修改)

    package com.escs.utils; import java.util.Iterator; import org.hibernate.cfg.AnnotationConfiguration; ...

  4. 实现WebService的调用与被调用

    之前一直用WCF来开发服务,可是从未用过WebService.对WebService有种很神奇的期待,都说WebService比较简单,但是从未用过就对我来说就是一种新的知识.起始让我来说WCF与We ...

  5. 什么是Angular JS？

    Angular JS学习笔记——什么是Angular JS? Angular JS是一个由Google维护的开源的Javascript框架,主要作者为: Misko Hevery(angular JS ...

  6. D15

    T3: 树上的递归,很裸 T4:题目模型:二分染色问题 以及根据ccy大神指点,理解树形dp可以从 没有上司的舞会 聚会的快乐 这两题入手

  7. Leapin' Lizards

    Leapin' Lizards 题目大意: 在一个网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴 ...

  8. Combo模糊匹配中文问题

    茗洋Easy UI 1.3.2 部分问题解决系列专题[Combo模糊匹配中文问题 修复] 本次给大家带来的EasyUI的我研究拓展的新特性 我使用的是  EasyUI 1.3.2版本的,项目是ASP. ...

  9. 利用微信公众平台实现自动回复消息—java版

    最近公司需要拿微信公众平台做个东西,所以就开始了最基本学习,网上很多是php版的,对于我这个只会java,不会php的就只能在网上找点只言片语来一点一点学习了.不费话了直接贴图看效果(很简单的). 不 ...

  10. .net中获取图像缩略图的函数GetThumbnailImage

    关于.net中获取图像缩略图的函数GetThumbnailImage的一些认识. 在很多图像软件中,打开一幅图像的时候都会显示其缩略图,在看图软件中这样的需求更为常见.如何快速的获取缩略图的信息并提供 ...