大家都我看看这个脚本啊?>

<!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>
<style type="text/css" media="screen">#slideshow{
width:70px;
height:100px;
position:relative;
overflow:hidden;
border:1px solid orange;
}

</style>
<title>我的测试!</title>
</head> <body>
<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
<li><a href="">Structure</a></li>
<li><a href="">Presentation</a></li>
<li><a href="">Behavior</a></li>
</ol>
<div id="slideshow">
<img id="preview" src="topics.jpg" alt="building blocks of web design" />
</div>
<script type="text/javascript">
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement);
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x){
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y){
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y){
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function prepareSlideshow() {
/*
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("linklist")) return false;
if(!document.getElementById("preview")) return false;
*/
var preview = document.getElementById("preview");
preview.style.position = "absolute";
preview.style.left = "0px";
preview.style.top = "0px";
var list = document.getElementById("linklist");
var links = list.getElementsByTagName("a");
links[0].onmouseover = function () {
moveElement("preview",-100,0,10);
}
links[1].onmouseover = function () {
moveElement("preview",-200,0,10);
}
links[2].onmouseover = function () {
moveElement("preview",-300,0,10);
}
}window.onload = function () {
moveElement;
prepareSlideshow;
}
</script>
</body></html>为什么没有效果啊?还有以下代码小弟不是很理解啊?
if(xpos < final_x){
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x){
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y){
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y){
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
0 小于 -80是假那就是不执行第一个if代码.
是不是直接执行第二个if语句啊.也就是说执行if(xpos > final_x)
最好能把4个if语句都帮我分析下.

解决方案 »

  1.   

    <!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>
            <style type="text/css" media="screen">#slideshow{
        width:70px;
        height:100px;
        position:relative;
        overflow:hidden;
        border:1px solid orange;
    }
                
            </style>
            <title>我的测试!</title>
        </head>    <body>
            <h1>Web Design</h1>
            <p>These are the things you should know.</p>
            <ol id="linklist">
                <li><a href="">Structure</a></li>
                <li><a href="">Presentation</a></li>
                <li><a href="">Behavior</a></li>            
            </ol>
            <div id="slideshow">
                <img id="preview" src="topics.jpg" alt="building blocks of web design" />
            </div>
            <script type="text/javascript">
                function moveElement(elementID,final_x,final_y,interval){
        if(!document.getElementById) return false;
        if(!document.getElementById(elementID)) return false;
        var elem = document.getElementById(elementID);
        if(elem.movement){
            clearTimeout(elem.movement);
        }
        var xpos = parseInt(elem.style.left==""?0:elem.style.left);
        var ypos = parseInt(elem.style.top==""?0:elem.style.top);
        if(xpos == final_x && ypos == final_y){
            return true;
        }
        if(xpos < final_x){
            var dist = Math.ceil((final_x - xpos)/10);
            xpos = xpos + dist;
        }
        if(xpos > final_x){
            var dist = Math.ceil((xpos - final_x)/10);
            xpos = xpos - dist;
        }
        if(ypos < final_y){
            var dist = Math.ceil((final_y - ypos)/10);
            ypos = ypos + dist;
        }
        if(ypos > final_y){
            var dist = Math.ceil((ypos - final_y)/10);
            ypos = ypos - dist;
        }
        elem.style.left = xpos + "px";
        elem.style.top = ypos + "px";
        
        var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
        elem.movement = setTimeout(repeat,interval);
                }
    function prepareSlideshow() {
        /*
        if(!document.getElementById) return false;
        if(!document.getElementsByTagName) return false;
        if(!document.getElementById("linklist")) return false;
        if(!document.getElementById("preview")) return false;
        */
        var preview = document.getElementById("preview");
        preview.style.position = "absolute";
        preview.style.left = "0px";
        preview.style.top = "0px";    
        var list = document.getElementById("linklist");
        var links = list.getElementsByTagName("a");
        links[0].onmouseover = function () {
            moveElement("preview",-100,0,10);
        }
        links[1].onmouseover = function () {
            moveElement("preview",-200,0,10);
        }
        links[2].onmouseover = function () {
            moveElement("preview",-300,0,10);
        }
    }window.onload = function () {
        moveElement("preview",0,0,10);
        prepareSlideshow();
    }
            </script>
        </body></html>
      

  2.   

    window.onload = function () {
        moveElement;
        prepareSlideshow;
    }
    这里调用方法时候没有传相应的参数
    moveElement("preview",0,0,10);//第一个是图片控件的ID,第二个和第三个是一个坐标点,第三个是切换的周期.
    prepareSlideshow();
      

  3.   

    parseInt的用法不对，再加一个参数，parseInt(elem.style.left,10);
    10表示是十进制
      

  4.   

    if(xpos < final_x){
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
    }
    if(xpos > final_x){
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
    }
    if(ypos < final_y){
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
    }
    if(ypos > final_y){
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
    }
    首先这个函数会循环调用的直到
    if(xpox==final_x&&ypox==final_y)
    {
      return true;
    }
    (ypos - final_y)/10
    之所以除10 那么最终ypox-final_y越来越靠近0，那么结果比较肯定的是相等。
    至于为什么不一步var dist=ypox-final_y
    ypox=ypox-dist
    答案是也行，不过就少了停顿感。
    读者请自已试试吧。
    把
    var dist = Math.ceil((xpos - final_x)/10);
    改成
    var dist=xpox-fianl_x
    也能显示
    读者自行比较他们的区别。