Image Rotator在JavaScript中使用鼠標拖動事件

我一直在搜索這個腳本整天。沒有人知道任何這樣的腳本，我可以使用鼠標拖動事件來旋轉圖像。使用javascript。Image Rotator在JavaScript中使用鼠標拖動事件

在此先感謝。

2010-07-17 SolidSnake

你的意思是沿着z軸旋轉圖像嗎？ – quantumSoup 2010-07-17 02:26:16

我認爲是這樣.. 2D旋轉.. – SolidSnake 2010-07-17 02:38:31

-1

你走了。這裏是我的解決方案，只用IE瀏覽器適用於FF版本，你找出什麼是相當於FF和其他瀏覽器VML對象：

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes"> 

<HEAD> 
<script> 
var dragok = false; 
var gotElementSelected = false; 
var currentElement = null; 

function move() 
{ 
    if (dragok) 
    { 
     tempX = event.clientX + document.body.scrollLeft; 
     tempY = event.clientY + document.body.scrollTop; 

     //rotating 
     document.getElementById(currentElement).style.rotation=tempX+tempY; 

     return false; 
    } 
} 

function down(){ 
    dragok = true; 
    if(gotElementSelected && currentElement !=null) 
     { 
      document.onmousemove = move; 
      return false; 
     } 
} 

function up() 
{ 
    if(gotElementSelected && currentElement !=null) 
     {  
      gotElementSelected = false; 
      dragok = false; 
      document.onmousemove = null; 
      currentElement = null; 
     } 
} 
</script> 

<STYLE>.rvml { 
    BEHAVIOR: url(#default#VML) 
} 
</STYLE> 
</HEAD> 

<BODY bgcolor=DDDDDD> 
<?xml:namespace prefix = rvml ns = "urn:schemas-microsoft-com:vml" /> 
<rvml:image style="POSITION: absolute; WIDTH: 100px; DISPLAY: none; HEIGHT: 100px; TOP: 100px; LEFT:100px; rotation: 0" id=myimage class=rvml 
onmousedown="gotElementSelected=true; currentElement=this.attributes.getNamedItem('id').value; selectedElement=currentElement;" 
onclick="select_element(this.attributes.getNamedItem('id').value); selectedElement=this.attributes.getNamedItem('id').value;" 
src = "path/to/your/image" coordsize = "21600,21600"></rvml:image>

來源

2011-01-10 04:19:40 SolidSnake

通常這就是jQueryRotate所做的 - 爲IE瀏覽器使用VML，用於firefox的canvas，用於現代瀏覽器的css3 - 所以你不必關心編碼所有這些瘋狂的東西，只需在適當的事件上使用簡單的.rotate即可。 :) – Wilq32 2011-03-15 11:12:30

我知道，但jQueryRotate沒有像我想要的方式實現。所以我必須自己做 – SolidSnake 2011-03-20 01:58:56

試試這個：

http://code.google.com/p/jqueryrotate/

來源

2010-07-17 02:33:00 quantumSoup

這使數值旋轉的圖像。當我用鼠標拖動圖像時，我需要將它旋轉。 – SolidSnake 2010-07-17 02:37:29

@ emac2014這就是當你使用你的編程技能來節省一天的時間。相信我，這是一樣好。 – quantumSoup 2010-07-17 02:42:21

我該如何連接拖動事件？你可以展示一個樣本.. – SolidSnake 2010-07-17 02:43:25

我有一個implmentation想法，因爲我要去也需要寫一個，除非你已經有一個解決方案，所以我想有它：）

無論如何，這樣做：

/**編輯：提前取出贊成我的僞代碼爲真正的**/

反正...我我會實施這個並讓你知道。當然，除非在接下來的幾個小時有人會派他執行:-) /**編輯：感謝那些誰做**/

UPDATE：這裏是，反正（旋轉了一個圖像另一個:) 它的工作很好，如果你正在導入這個工作，請稍微清理一下。它是跨瀏覽器。

HTML：

<div id="centered" style=" /* margin-left:400px; computed in javacript*/ "> 
    <img id="static" src="" style="position:absolute; z-index:-1"> 
    <img id="rotating" src="" > 
</div>

包括：

// jquery.min.js, jQueryRotate.js (discussed above)

的javascript：

var alpha=0 
var dragOrig = null 
var mouseInPic = new Point(0,0) 
var diff 
var imageNo = 0 

function swapImage_or_something(i /* or get src from somewhere else*/) { 

    $("#static").attr("src", arrCfgImages[i].src) 
    $("#rotating").attr("src", arrCfgImages[i].src) 


    $("#static").height(450); 
    $("#rotating").height(450); 

    $("#centered").css ({ 
     "margin-left": ($(document).width()-$("#static").width())/2 
    }) 

    $("#rotating").rotate(0) 

} 


function doEventBinding() { 

    $(document).bind("mousedown", function (e) { 
     dragOrig = new Point (mouseInPic.x, mouseInPic.y) 

     e.preventDefault() 
     return 


    }); 
    $(document).bind("mouseup", function (e) { 
     if (dragOrig) { 
      dragOrig = null 
      alpha+=diff 
      diff=0 
     } 
    }); 
    $(document).bind("mousemove", function (e) { 
     var x = -1*(Math.round($("#rotating").width()/2+0.01) - (e.pageX - $("#rotating").offset().left - (isIE ? 2 : 0))) 
     var y = Math.round($("#rotating").height()/2+0.01) - (e.pageY - $("#rotating").offset().top - (isIE ? 2 : 0)) 
     mouseInPic = new Point(x,y) 

     if (dragOrig) { 
      var cp = new Point(0,0) 
      var deg1 = getAngleBetweenPoints(dragOrig, cp) 
      var deg2 = getAngleBetweenPoints(mouseInPic, cp) 
      diff = (deg1-deg2) 
      diff = diff<0 ? diff+360 : diff>360 ? diff-360 : diff 
      diff = diff>180 ? diff-360 : diff 
      //my$("debug").innerHTML = diff 
      $('#rotating').rotate(alpha+diff); 
      e.preventDefault() 
     } 
    }); 

}

也：

var toRAD = 1/180*Math.PI; 
var toDEG = 180/Math.PI; 
    function getAngle(dx,dy) { 
     var ang 
     if (dx!=0) { 
      var rad = Math.atan(dy/dx) + (dx<0?Math.PI:0) 
      ang = rad*toDEG 
      if (ang<0) ang+=360; 
     } else { 
      ang = dy>0 ? 90 : 270; 
     } 
     return ang; 
    } 

    function getAngleBetweenPoints (p1, p2) { 
     var dx = p1.x-p2.x 
     var dy = p1.y-p2.y 
     return getAngle (dx, dy) 
    }

來源

2011-01-09 12:48:59 alfred

以及我用vml來執行圖像旋轉。它僅適用於IE。我不關心FF或其他瀏覽器。 – SolidSnake 2011-01-10 04:06:30

@RobinVanPersi哇！ – Exception 2016-11-01 06:55:56

使用GreenSock有鈹花哨的旋轉功能。看看： https://www.greensock.com/draggable/ 向下滾動旋轉。不幸的是它不完全免費。

來源

2014-02-14 08:28:46 arpo

Image Rotator在JavaScript中使用鼠標拖動事件

回答

相關問題