使用javascript移动元素

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

的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>

但是它不调用鼠标悬停事件，我想不通为什么....

这里是版本使用SVG：

Working version using Javascript + SVG

工作版本： Working without SVG

来源

2011-08-17 Jack

不区分重要吗？即onMouseOver？否则，也许可以在包装img标签的div上尝试，或者甚至仅使用div并将图像设置为背景图像。 –

事件处理程序[在这种情况下]（http://jsfiddle.net/userdude/BYtCC/）的情况并不重要。但是，OP应该使用由jQuery添加的[事件处理程序]（http://api.jquery.com/category/events/），而不是在标记IMO中添加。 –

看到这里http://jsbin.com/ecihij/edit#source

当你写你的职责，你不需要把他们jQuery的文件准备部分内

震动是正确的，你也应该使用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); 



    });

来源

2011-08-17 23:51:22 Daveo

请将相关代码放在您的答案中，而不仅仅是链接中。 :) –

虽然我认为他在这里的钱，把他们从这部分移出，我认为你会很好去。 –

嘿，我已经上传它作为一个例子，所以它可以下载，如果你喜欢。 http://jtbrown.me.uk/assets/unrelated/pan/pan.html – Jack

使用javascript移动元素

回答

相关问题