<html>
<head>
<title>试题2</title>
<script language="javascript">function changebutton()
{
var o = event.srcElement;
if(o.value=="开始")
{
o.value = "停止";
startMoveDiv();
}
else
{
o.value = "开始";
stopMoveDiv();
}
}
var g_moving_tag = false;
var g_moving_direction = "RIGHT";
var g_moving_step = 2;
var g_moving_interval = 10;
var g_moving_div = null;
function startMoveDiv()
{
if(g_moving_tag==false)
{
g_moving_tag = true;
g_moving_div = document.getElementById("div_element");
timer_name = setInterval("moveDiv();",g_moving_interval);
}
}
function moveDiv()
{
if(g_moving_tag)
{
if(g_moving_direction == "RIGHT")
{
g_moving_div.style.pixelLeft++;
if(g_moving_div.style.pixelLeft+g_moving_div.style.pixelWidth>=document.body.clientWidth)
{
g_moving_div.style.pixelLeft--;
g_moving_direction = "LEFT"
}
}
else
{
g_moving_div.style.pixelLeft--;
if(g_moving_div.style.pixelLeft<=0)
{
g_moving_div.style.pixelLeft++;
g_moving_direction = "RIGHT";
}
}
}
}
function stopMoveDiv()
{
if(g_moving_tag)
{
clearInterval(timer_name);
g_moving_tag = false;
}
}function init()
{
var div = document.getElementById("div_element")
div.attachEvent("onmouseover",onDivMouseOver);
div.attachEvent("onmouseout",onDivMouseOut);
div.attachEvent("onmousedown",onDivMouseDown);
div.attachEvent("onmousemove",onDivMouseMove);
div.attachEvent("onmouseup",onDivMouseUp);
}
function onDivMouseOver()
{
event.srcElement.style.background = "green";
}
function onDivMouseOut()
{
event.srcElement.style.background = "blue";
}
var g_user_moving_tag =false;
var g_user_moving_oldx;
var g_user_moving_oldy;
function onDivMouseDown()
{
if(!g_moving_tag)
{
g_user_moving_oldx = event.x;
g_user_moving_oldy = event.y;
event.srcElement.setCapture();
g_user_moving_tag = true;
}
}
function onDivMouseMove()
{
if(g_user_moving_tag&&!g_moving_tag)
{
var x = event.x;
var y = event.y;
event.srcElement.style.pixelLeft += x - g_user_moving_oldx;
event.srcElement.style.pixelTop  += y - g_user_moving_oldy;
g_user_moving_oldx = x;
g_user_moving_oldy = y;
}
}
function onDivMouseUp()
{
if(!g_moving_tag&&g_user_moving_tag)
{
g_user_moving_tag = false;
event.srcElement.releaseCapture();
}
}
</script>
</head>
<body onload=init()>
<input type="button" value="开始"  name="start_stop" id="start_stop" onclick=changebutton()>
<div id="div_element" style="position:absolute;top:300;left:10;width:100;height:80;background-color:#0000ff;border:#ff0000 solid 3"><font color="#ffffff">DIV元素</font></div>
</body> 
</html>

解决方案 »

  1.   

    <html>
    <head>
    <title>试题2</title>
    <script language="javascript">
    var change=0;
    var time;
    function move(){
    var objdiv=document.getElementById("div_element");
    if((objdiv.offsetLeft+objdiv.offsetWidth+10)<window.screen.width){
    if(change){
    objdiv.style.left = objdiv.offsetLeft-1;
    }else{
    objdiv.style.left = objdiv.offsetLeft+1;
    }
    } if((objdiv.offsetLeft+objdiv.offsetWidth+10)>=window.screen.width){
    change=1;
    objdiv.style.left = objdiv.offsetLeft-1;
    } if(objdiv.offsetLeft==0){
    change=0;
    objdiv.style.left=objdiv.offsetLeft+1;
    } time = window.setTimeout("move()",100);
    }function changebutton(){
    if(document.getElementById("start_stop").value=="开始"){
    document.getElementById("start_stop").value="停止";
    move();
    }else{
    document.getElementById("start_stop").value="开始";
    clearTimeout(time);
    }

    </script>
    </head>
    <body>
    试题2
    <br>
    测试内容:移动“DIV元素”。(共30分)
    <br>要求:
    <br>1、点“开始”按钮后,“开始”按钮变为“停止”按钮,
    “DIV元素”平滑地往右移动,到达页面的右边框时自动改为往左移动,到达页面的左边框后又改变方向,依此循环,
    直到点击“停止”按钮后停止移动。(10分)
    <br>2、当鼠标悬停在DIV元素上时,它的背景色发生变化,
    接着按下鼠标左键后可拖拽DIV元素,松开鼠标左键后DIV元素不可拖拽,鼠标移出DIV元素时背景色恢复。(20分)
    <br><br>
    注:发现抄袭别人的代码的,该题为零分。
    <br>
    =========================================================================================<br><br><br><input type="button" value="开始"  name="start_stop" id="start_stop" onclick=changebutton()>
    <div id="div_element" style="position:absolute;top:300px;left:10px;width:100px;height:80px;background-color:#0000ff;border:#ff0000 solid;"><font color="#ffffff">DIV元素</font></div>
    </body> 
    </html>