js中鼠标触发事件的简单实例
在这里用到了document 对象的两个事件 ：
onmousemove：当用户将鼠标划过对象时触发。
onmouseout：当用户将鼠标指针移出对象边界时触发。
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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#div1{
background-color:#FF0000;
height:100px;
width:200px;
}
#div2{
background-color: #000000;
height:100px;
width:200px;
}
#div3{
background-color: #003300;
height:100px;
width:200px;
}
</style>
<script language="javascript">
function chang1(cor,hig){
var div1= document.getElementById("div1");
div1.style.backgroundColor=cor;
div1.style.height=hig;
}
function chang2(cor,hig){
var div2= document.getElementById("div2");
div2.style.backgroundColor=cor;
div2.style.height=hig;
}
function chang3(cor,hig){
var div3= document.getElementById("div3");
div3.style.backgroundColor=cor;
div3.style.height=hig;
}
function changout1(cor,hig){
var div1= document.getElementById("div1");
div1.style.backgroundColor=cor;
div1.style.height=hig;
}
function changout2(cor,hig){
var div2= document.getElementById("div2");
div2.style.backgroundColor=cor;
div2.style.height=hig;
}
function changout3(cor,hig){
var div3= document.getElementById("div3");
div3.style.backgroundColor=cor;
div3.style.height=hig;
}
</script>
</head>
<body>
<div id ="div1" onmousemove="chang1('blue','200px')" onmouseout="changout1('#FF0000','100px')">
</div>
<div id ="div2" onmousemove="chang2('pink','200px')" onmouseout="changout2('#000000','100px')">
</div>
<div id ="div3" onmousemove="chang3('orange','200px')" onmouseout="changout3('#003300','100px')">
</div>
</body>
</html>
分享到：
相关推荐
JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，能够实现动态内容、用户交互、页面行为控制等效果。在这个特定的案例中，“js特效点击会变色哦！”是一个关于利用JavaScript实现点击...
### div+CSS与JavaScript结合实现表单元素鼠标悬停变色 #### 一、概述 在Web开发中，为了提高用户体验以及页面的交互性，常常会利用CSS与JavaScript结合来实现一些动态效果，如鼠标悬停时表单元素的颜色变化等。...
在这个例子中，当用户点击按钮时，JavaScript函数`changeColor`被调用，使得id为`myDiv`的div元素背景颜色变为蓝色。 4. DOM操作： Document Object Model（DOM）是HTML和XML文档的结构表示。JavaScript可以通过...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
在本案例中，"javascript经典特效---浮动的变色层.rar" 提供了一个经典的JavaScript实现，即一个浮动并变色的层（layer）效果。这个效果通常用于吸引用户的注意力或者增加网站的视觉吸引力。 首先，我们要理解什么...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
下面，我们将详细地解析本篇文章中提到的关于实现随机变色的代码实例。 首先，我们来关注基础的HTML结构。在给定的代码片段中，创建了一个简单的HTML文档结构，其中包含一个div元素，它的id是"box"。这个div元素是...
在网页设计中，交互性是提升...最后，压缩包中的"变色09-04-20JS和CSS"文件可能包含了示例代码和进一步的解释，你可以查看这些文件以加深理解和实践。学习和掌握这两种技术将有助于你创建更具吸引力和互动性的网页。
通过这些知识点的详细解释，可以了解到JavaScript实现99乘法表及隔行变色实例代码不仅仅是简单的编程问题，它还涵盖了网页布局、事件处理、逻辑判断等多个方面的综合应用。掌握这些知识可以帮助读者更好地理解如何...
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和浏览器...
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
总的来说，这个实例通过JavaScript实现了动态图片轮播效果，同时结合鼠标悬停事件，使用户可以通过点击或悬停在索引上直观地控制轮播。这样的功能可以增强用户的交互体验，使得网站更加生动和吸引人。在实际开发中，...
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.6 综合实例一：直接输入的Excel表格 6.7 综合实例二：模仿新浪网民调查问卷 第7章 用CSS设置页面和...
下面是一个简单的例子： ```css @keyframes rotateDiv { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } div { animation: rotateDiv 2s linear infinite; /* 持续2秒，线性速度，...
在网页设计中，CSS（Cascading Style Sheets）是一种...总的来说，实现“鼠标悬停改变div背景色”的效果是网页交互设计中的基础技巧，通过CSS和JavaScript的结合，我们可以轻松地为用户提供视觉反馈，提升用户体验。
它通过组件化的方式让开发变得更加简单高效。而"react-GradientLab"则是在React生态中的一个专为选择渐变色设计的工具，帮助开发者在项目中实现美观且易于操作的颜色过渡效果。 渐变色在现代网页设计中起着至关重要...
JavaScript（简称JS）是Web前端开发中的核心技术，用于实现网页的动态效果和交互。这个"JS各种实例web前端"的压缩包文件包含了多种常见的JS特效，对于初学者和开发者来说，是一个宝贵的资源库。下面将详细讲解这些...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...