鼠标事件
思路讲解
onmouseover/out/down 鼠标三种状态
click dblclick 鼠标单击或者双击状态
事件=函数（this，属性1，2，3）
function 函数（a,b,c,d){ a.style.属性=b/c/d
代码如下：
方法一：
<div id="div1" οnclick="show(this,'yellow');"
οnmοuseοver="show(this,'red');"
οnmοuseοut="show(this,'blue');"
οndblclick="show(this,'green')">ttt</div>
<div class="css" οnmοuseοver="show(this,'blue');" οnmοuseοut="show(this,'green');">
</div>
<script>
function show(obj,color)
{
obj.style.backgroundColor=color;
}
</script>
方法二：
<!--<!DOCTYPE html>-->
<html>
<head>
<meta charset="utf-8">
<title>获取鼠标位置</title>
img{
position:absolute;
left:0px;
top:0px;
}
</head>
<body οnmοusemοve="test();">
<div id="div1"></div>
<img id="im1" src="http://www.h5edu.cn/Public/assets/img/logo_blue.png">
<script>
var obj=document.getElementById("div1");
var img=document.getElementById("im1");
function test()
{
var cx=event.clientX;
var cy=event.clientY;
var sx=event.screenX;
var sy=event.screenY;
var msg="clientx="+cx+" clientY="+cy+" screenX="+sx
+" screenY="+sy;
obj.innerHTML=msg;//设置div里面的内容
window.status=msg;//设置状态条内容
window.document.title=msg;//设置当前文档的标题
//修改图片的坐标
img.style.top=cy+20;
img.style.left=cx+20;
}
</script>
</body>
</html>
img{
position:absolute;
left:0px;
top:0px;
}
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30545764/viewspace-2120998/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/30545764/viewspace-2120998/
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
