蜗牛—JavaScript学习之鼠标滑过与离开

鼠标划过,图片会变,离开又回复到初识状态

<!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>
<script>
function $(eid){
	return document.getElementById(eid);
}
function over(){
	var obj=$("myImg");
	obj.src="../images/fruit.jpg";
}
function out(){
	var obj=$("myImg");
	obj.src="../images/grape.jpg";
}

</script>
</head>

<body>
<img  id="myImg" src="../images/grape.jpg" onmouseover="over()"  onmouseout="out()"/>
</body>
</html>

鼠标经过:调用onmouseover()方法、鼠标离开调用out()方法

蜗牛—JavaScript学习之鼠标滑过与离开,布布扣,bubuko.com

时间: 2024-10-13 21:48:07

蜗牛—JavaScript学习之鼠标滑过与离开的相关文章

Javascript学习笔记(二)javascript的特点

..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正细节也记不住,到用到的时候在抠.尽管编程是外行,也积累了一些常识,所以就从javascript的特点开始学习. 一.什么是Javascript?JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有相对安全性的客户端脚本语言.这个定义非常好,几乎涵盖了Java

JQuery实现鼠标滑过显示导航下拉列表

我们往往是将同一级目录下的栏目先隐藏起来,当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表,下面为大家讲解下是如何实现的,当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 <html> <h

利用jQuery实现,蒙板随鼠标滑入滑出

今天学习了jQuery的一些知识点,做了一个练习:实现蒙板随鼠标移动,从元素的四个方向滑入滑出.如图: jQuery知识点: 定位:获取相对于父元素的偏移量           position().left           position().top 获取元素相对于当前窗口的偏移量           offset().left           offset().top 步骤: 1.创建父元素.当前对象.蒙板 代码如下: <div class="wrap">  

鼠标滑过触发拉窗式JS效果

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>鼠标滑过触发拉窗式JS效果</title> <link rel="stylesheet" href="

javascript 学习总结第二天

  javascript 学习总结第二天 函数和对象 对象 声明方式 newObject() {} 构造函数 元素的操作 . [] this 对象的遍历 for in with简便操作 函数 函数的声明方式 functiondemo(){} var demo= function(){} var demo= new Function('x','y','alert(x+y)'); 函数的调用 在代码中直接调用 事件触发 赋值给一个变量 注意事项 优先级 在js中定义变量的时候不能跟函数名冲突否则会覆

HTML/CSS/JavaScript学习总结(转)

HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 . Html是通过标签来定义的语言,代码都是由标签所组成 .Html代码不用区分大小写 . Html代码由<html>开始</html>结束.里面由头部分<head>

CSS实例:鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

JavaScript学习(一)

1. DOM和BOM2. JS 无论语句还是变量,都是大小写敏感的3. JS会忽略多余的空格4. new String 声明类型时注意大写5. JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等.在 JavaScript 中,对象是拥有属性和方法的数据6. JavaScript 数据类型:字符串.数字.布尔.数组.对象.Null.Undefined7. JavaScript函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块8. 如果把数字与字符串相加,结果将成为字

CSS3扇形动画菜单 鼠标滑过扇形展开动画

详细内容请点击 我们之前已经分享过很多CSS3菜单了,很多都比较实用,有部分CSS3菜单外观比较炫酷.今天要分享的这款CSS3菜单外观是扇形的,并且在鼠标滑过菜单时,扇形菜单项将会以动画的方式展开,并且支持多级下拉菜单.  在线演示源码下载 学习来源:http://www.html5tricks.com/css3-sector-menu.html 更多html5内容请点击