`
javawangli
  • 浏览: 224107 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js "div变色" 的简单实例

阅读更多

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>

 

0
0
分享到:
评论

相关推荐

    js特效点击会变色哦!

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,能够实现动态内容、用户交互、页面行为控制等效果。在这个特定的案例中,“js特效点击会变色哦!”是一个关于利用JavaScript实现点击...

    div+CSs表单鼠标移动变色

    ### div+CSS与JavaScript结合实现表单元素鼠标悬停变色 #### 一、概述 在Web开发中,为了提高用户体验以及页面的交互性,常常会利用CSS与JavaScript结合来实现一些动态效果,如鼠标悬停时表单元素的颜色变化等。...

    html与javascript简单例子

    在这个例子中,当用户点击按钮时,JavaScript函数`changeColor`被调用,使得id为`myDiv`的div元素背景颜色变为蓝色。 4. DOM操作: Document Object Model(DOM)是HTML和XML文档的结构表示。JavaScript可以通过...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...

    javascript经典特效---浮动的变色层.rar

    在本案例中,"javascript经典特效---浮动的变色层.rar" 提供了一个经典的JavaScript实现,即一个浮动并变色的层(layer)效果。这个效果通常用于吸引用户的注意力或者增加网站的视觉吸引力。 首先,我们要理解什么...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...

    javascript随机变色实例代码

    下面,我们将详细地解析本篇文章中提到的关于实现随机变色的代码实例。 首先,我们来关注基础的HTML结构。在给定的代码片段中,创建了一个简单的HTML文档结构,其中包含一个div元素,它的id是"box"。这个div元素是...

    鼠标移动到DIV上改变其背景色JS和CSS两种方法

    在网页设计中,交互性是提升...最后,压缩包中的"变色09-04-20JS和CSS"文件可能包含了示例代码和进一步的解释,你可以查看这些文件以加深理解和实践。学习和掌握这两种技术将有助于你创建更具吸引力和互动性的网页。

    JavaScript实现99乘法表及隔行变色实例代码

    通过这些知识点的详细解释,可以了解到JavaScript实现99乘法表及隔行变色实例代码不仅仅是简单的编程问题,它还涵盖了网页布局、事件处理、逻辑判断等多个方面的综合应用。掌握这些知识可以帮助读者更好地理解如何...

    《精通CSS+DIV网页样式与布局》光盘源码

     6.3 表格实例二:鼠标经过时变色的表格   6.4 表格实例三:日历   6.5 CSS与表单   6.6 综合实例一:直接输入的Excel表格   6.7 综合实例二:模仿新浪网民调查问卷   第7章 用CSS设置页面和浏览器...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....

    JS图片轮播与索引变色功能实例详解

    总的来说,这个实例通过JavaScript实现了动态图片轮播效果,同时结合鼠标悬停事件,使用户可以通过点击或悬停在索引上直观地控制轮播。这样的功能可以增强用户的交互体验,使得网站更加生动和吸引人。在实际开发中,...

    精通CSS.DIV.网页样式与布局 源码

     6.3 表格实例二:鼠标经过时变色的表格   6.4 表格实例三:日历   6.5 CSS与表单   6.6 综合实例一:直接输入的Excel表格   6.7 综合实例二:模仿新浪网民调查问卷   第7章 用CSS设置页面和...

    div 自动旋转 手机旋转效果 google出

    下面是一个简单的例子: ```css @keyframes rotateDiv { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } div { animation: rotateDiv 2s linear infinite; /* 持续2秒,线性速度,...

    div css 鼠标悬停在div层上时,div背景色改变

    在网页设计中,CSS(Cascading Style Sheets)是一种...总的来说,实现“鼠标悬停改变div背景色”的效果是网页交互设计中的基础技巧,通过CSS和JavaScript的结合,我们可以轻松地为用户提供视觉反馈,提升用户体验。

    react-GradientLab是一款采用React制作的渐变色选择器

    它通过组件化的方式让开发变得更加简单高效。而"react-GradientLab"则是在React生态中的一个专为选择渐变色设计的工具,帮助开发者在项目中实现美观且易于操作的颜色过渡效果。 渐变色在现代网页设计中起着至关重要...

    JS各种实例web前端

    JavaScript(简称JS)是Web前端开发中的核心技术,用于实现网页的动态效果和交互。这个"JS各种实例web前端"的压缩包文件包含了多种常见的JS特效,对于初学者和开发者来说,是一个宝贵的资源库。下面将详细讲解这些...

    100多个JQuery效果示例(实例)div+css+javascrpit

    61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...

Global site tag (gtag.js) - Google Analytics