两个代码示例如下:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{width: 200px;height: 200px;border:10px solid black;
float: left;background-color: yellow;margin: 10px;}
div#div4{opacity: 0.3;filter: alpha(opacity:30)}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function()
{
startMove(this,'height',400)
}
oDiv1.onmouseout=function()
{
startMove(this,'height',200)
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr))
}
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.opacity=(cur+speed)/100;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30)
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr]
}
else
{
return getComputedStyle(obj,false)[attr]
}
}
</script>
</html>
----------------------我是分割线--------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1{width: 200px;height: 200px;background-color: red;position: absolute;}
</style>
</head>
<body style="height:2000px;width:4000px;">
这里是一大堆文字,一大堆文字,一大堆文字。
<div id="div1">这里是一大堆文字,一大堆文字,一大堆文字。</div>
这里是一大堆文字,一大堆文字,一大堆文字。
</body>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
function getPos(ev)
{
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}
}
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent);
var disX=pos.x-oDiv.offsetLeft;
var disY=pos.y-oDiv.offsetTop;
if(oDiv.setCapture)
{
oDiv.onmousemove=mouseMove;
oDiv.onmouseup=mouseUp;
oDiv.setCapture();//上锁
}
else
{
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}
function mouseMove(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent);
var l=pos.x-disX;
var t=pos.y-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
function mouseUp()
{
this.onmousemove=null;
this.onmouseup=null;
if(oDiv.releaseCapture)
{oDiv.releaseCapture();}
}
return false;//阻止FF的bug
}
</script>
</html>
————————————————————————————————————————————————————————————————————分割线————————
问题是,第一段代码为什么是
oDiv1.onmouseover=function()
{
startMove(this,'height',400)
}
而第二段代码是
oDiv.onmousemove=mouseMove;这个格式
我互换两种代码格式,两个代码均无法正常运行。
比如第一种:oDiv1.onmouseover=startMove(this,'height',400);
第二种:
oDiv.onmouseover=function()
{
mouseMove;
}
跪求指点,谢谢各位大神!
1.this是只有函数中有这个对象。
2.你调用这个函数,this就指向你,如果是window调用这个函数,this就指向window。
3.你mouseMove是个函数...执行函数是mouseMove();
4.如果你调调试一个程序有没有运行,可以在你那个函数中添加console.log(1);
看你自己写的:
第一段代码:
// 这是正确的写法
oDiv1.onmouseover = function () {
startMove(this, 'height', 400);
};
然后,你修改成了这样:
oDiv1.onmouseover = startMove(this, 'height', 400);
那么,请问,你修改的写法中的 this
从哪儿来?
第二段代码:
正确的写法是这样:
// 直接将函数赋值给变量,不加括号,就表示调用函数
oDiv.onmousemove = mouseMove;
而你改成了这样:
oDiv.onmouseover = function () {
mouseMove;
};
那么,你修改的代码里,mousemove
是啥?变量?函数要运行不该要加 ()
吗?
所以,第一段代码,你要传入 this
,那么,就不能那样简写;第二段代码,在你要运行的函数上加上括号。