让图片飞
关键字:onmouseover
翻译:鼠标移到目标上时
目的:让图片跟着鼠标移动
思路:设置document的onmouseover事件,注意是document.因为dom范围比较大.并且设置图片的位置属性,使其脱离文档流.
实例:
<!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>
<title></title>
<script type="text/javascript">
onload = function () {
document.onmousemove = function () {
var imObj = document.getElementById('im');
imObj.style.position = 'absolute'; //脱离文档流
//position:位置
//absolute:绝对的,必须设置这块,下面的style才能使用
//imObj.style.left = event.clientX + 'px';
// imObj.style.top = event.clientY + 'px'; //注意这里是top
imObj.style.left = event.clientX - imObj.offsetWidth + 'px'; //减去自身
imObj.style.top = event.clientY - imObj.offsetHeight + 'px';
};
};
</script>
</head>
<body>
<img src="div1.png" id='im' />
</body>
</html>知识点:event.clientX 获取鼠标当前X坐标,event.clientY获取鼠标当前Y表座.注意,获取过来的是没有px的
Dom知识点:
声明变量要赋值,var n=10
尽量避免直接声明全局变量,比如要声明全局变量name,但是有可能和window.name有冲突.所有全局变量一般都会在一个全局对象中.使用全局变量的时候通过命名控件,来减少和系统的重名
可以使用模拟命名空间的方式来避免命名冲突
例如:
var itcast={};
itcast.net={}:
全局变量相对耗时间,低效,尽量避免使用
注意:在循环的时候可能length会改变,尽量提取出length的值后,在循环
知识点:尽量避免使用eveal('alert("3")'); 这种是属于双重解析.效率较低
尽量使用原生的方法,比如内置的join(),reverse(),效率较高.
尽量使用switch代替多个if-else
使用这种写法,一次性申明多个局部变量
var n1=10,m='hello',n2=true;减少字节数,提高效率
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
