Question

我已经构建了一个可以移动SVG元素的小型Javascript应用程序，我现在尝试使用控件的图像元素而不是SVG形状来重建它。

Javascript + jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">         
    $(document).ready(function(){
        var panning = false;
        var direction;

        function startPan(dir){
            panning = true;
            direction = dir;
        }  

        function stopPan(){
            panning = false;
        }

        function pan(){  
            var item = $("#moveme"); 
            var x = item.position().left; 
            var y = item.position().top;            
            var amount = 1;
            if(direction == "left"){
                x -= amount;
            } else if (direction == "right"){
                x += amount ;
            } else if (direction == "up"){
                y -= amount;
            } else if (direction == "down"){
                y += amount;
            }

            item.css("left", x);
            item.css("top", y);
        }

        function panLoop(){          
            if(panning == true){      
                pan();
            }
        }
        setInterval(panLoop,100);
    });
</script>

<style>
    .button:hover{
        opacity: 0.5;
    }

    .button{
        position: absolute;
    }

    .compass{
        position: absolute;
    }

    div.pan{
        position: absolute;
        width: 90px;
        height: 90px;
    }

    #moveme{
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<div class="pan">
    <img class="button"
         style="top: 0px; left: 30px;"
         src="images/tu.png"
         onmouseover="startPan('up')"
         onmouseout="stopPan()" />
    <img class="button" 
         style="top: 30px; right: 0px;"         
         src="images/tr.png"
         onmouseover="startPan('right')"
         onmouseout="stopPan()" />     

    <img class="button" 
         style="bottom: 0px; left: 30px;"         
         src="images/td.png"
         onmouseover="startPan('down')"
         onmouseout="stopPan()" />       

    <img class="button" 
         style="top: 30px; left: 0px;"         
         src="images/tl.png"
         onmouseover="startPan('left')"
         onmouseout="stopPan()" />

    <img class="compass"
         style="top: 21px; left: 21px;"
         src="images/c.png"/>

</div>

<div id="moveme">
    HELLo
</div>

然而，它没有调用mouseover事件，我无法弄清楚为什么......

以下是使用SVG的版本：

Working version using Javascript + SVG

工作版本： Working without SVG

Answer 1

请参阅此处http://jsbin.com/ecihij/edit#source

编写函数时，不需要将它们放在jQuery文档的Ready部分

中

Jarred是对的，你也应该使用jQuery事件处理程序，在这里查看更新的示例 http://jsbin.com/ecihij/2/edit

以下代码

<强> HTML

<!DOCTYPE html>
<html>
<head>


<style>
    .button:hover{
        opacity: 0.5;
    }

    .button{
        position: absolute;
    }

    .compass{
        position: absolute;
    }

    div.pan{
        position: absolute;
        width: 90px;
        height: 90px;
    }

    #moveme{
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<div class="pan">


    <p class="button bup" style="top: 0px; left: 30px;" > up</p>

    <p  class="button bright" syle="top: 30px; right: 0px;" >right </p>  


    <p  class="button bdown" style="bottom: 0px; left: 30px;">down </p>     

    <p class="button bleft" style="top: 30px; left: 0px;" >left </p>

    <p  class="compass" style="top: 21px; left: 21px;">compass </p>

</div>

<div id="moveme">
    HELLo
</div>
</body>
</html>

<强> JAVASCRIPT

         var panning = false;
        var direction;

function startPan(dir){
            panning = true;
            direction = dir;
        }  

        function stopPan(){
            panning = false;
        }

        function pan(){  
            var item = $("#moveme"); 
            var x = item.position().left; 
            var y = item.position().top;            
            var amount = 1;
            if(direction == "left"){
                x -= amount;
            } else if (direction == "right"){
                x += amount ;
            } else if (direction == "up"){
                y -= amount;
            } else if (direction == "down"){
                y += amount;
            }

            item.css("left", x);
            item.css("top", y);
        }

        function panLoop(){          
            if(panning === true){      
                pan();
            }
        }

     setInterval(panLoop,100);

$(document).ready(function(){


  $('.bup').mouseover(function(){  startPan('up');  }).mouseout(stopPan); 
  $('.bright').mouseover(function(){  startPan('right');  }).mouseout(stopPan); 
  $('.bleft').mouseover(function(){  startPan('left');  }).mouseout(stopPan); 
  $('.bdown').mouseover(function(){  startPan('down');  }).mouseout(stopPan); 



    });

使用javascript移动元素

1 个答案: