【JS学习笔记】第一个JS效果——鼠标提示框
分析效果实现原理——鼠标提示框
样式：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效果——鼠标提示框的更多相关文章
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- Node.js学习笔记(1) - Node.js简介
近期在看一些Node.js的知识,看完后觉得,一些前面的东西忘记了,于是整理一下,方便自己查阅,也希望对学习Node.js的朋友有些帮助: 当然以下只是我个人的观点和理解,不喜勿喷,也望大神指教. 一 ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- Node.js学习笔记(2) - Node.js安装及入门hello world
今天来简单的记录一下Node.js的安装配置以及简单的入门 一.Node.js的安装 1.windows下的安装 windows下的安装很简单,只需要去官网http://nodejs.org中,找到w ...
- Node.js学习笔记(七) --- Node.js的静态文件托管、路 由、EJS 模板引擎、GET 、POST
1 . Nodejs 静态文件托管静态 web 服务器封装 2 . 路由 官方解释: 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等)组成的, ...
- Node.js学习笔记(八) --- Node.js的路由模块封装
1 .模块化的方式封装 整理中… 2 .封装仿照 express 的路由整理中…
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- 实例学习SSIS（一）--制作一个简单的ETL包
原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...
- 水晶报表使用经验谈－－使用sql语句直接生成dataset做为报表的数据源
概述: 上一次自己做了直接在rpt文件里使用oledb连接使用数据库的方法 但是不是很灵活 这次做了使用sql语句直接生成dataset做为报表的数据源(即push模式),这样就可以接受参数了.当然报 ...
- OpenCV2第一个马拉松8环——画一个柱状图
在包里 灰度直方图 彩色直方图 葵花宝典 直方图的理论还是非常丰富的,应用也非常多,诸如: 直方图均衡化 直方图匹配(meanshift,camshift) 在这里,我先介绍基础.怎样绘制图像的直方图 ...
- VC++注射过程
2014/10/19 11:12 // stdafx.h : // // // #pragma once #include "targetver.h" #include <s ...
- Unity 3.5
ASP.NET Web Forms 的 DI 應用範例 跟 ASP.NET MVC 与 Web API 比起来,在 Web Forms 应用程式中使用 Dependency Injection 要来的 ...
- visual c++ 动态链接库调用总结
由于每次使用动态链接库的时候都要重新去查资料,查调用方式,有些烦躁,本人抽点时间在此做个总结,希望可以对需要的朋友有所帮助. 1,显式加载方式加载动态链接库 简单易懂,随掉随用 (1) ...
- MVC中验证码
MVC中验证码的实现(经常用,记录备用) 一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭 ...
- Asp.Net请求响应过程
Asp.Net请求响应过程 在之前,我们写了自己的Asp.Net框架,对整个流程有了一个大概的认识.这次我们来看一下Asp.Net整个请求处理过程是怎么样的. 浏览器封装请求报文,发送请求到达服务器, ...
- oracle中sys和System的默认密码
sys:change_on_install system:oracle 如果用pl/sql登录的话,记得在下面用户权限选项选择sysdba,如图所示:
- jQuery 2.0.3 源码分析Sizzle引擎解析原理
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...