通過JQuery將img的位置動態改變爲鼠標位置

我試圖通過jquery動態地將img的位置更改爲我的鼠標位置。問題是它不起作用。我的意思是它根本不動。這裏是我的jQuery代碼如下：通過JQuery將img的位置動態改變爲鼠標位置

$(document).ready(function() { 
    $(document).click(function(e) { 
    $('#circle').css({position:'absolute', 'left':e.pageX, 'top':e.pageY}); 
    }); 
});

幫助，將不勝感激。我對這個有點新，所以生病需要你引導我通過你的答案。提前致謝。

這是我的HTML和CSS代碼的要求：

#circle { 
    max-width:25px; 
    max-height:36px; 
    width:auto; 
    height:auto; 
    -webkit-filter: drop-shadow(0px 0px 5px #ffffff); 
}

HTML：（在我的身體標記）

<img src="Images/circleIcon.png" id="circle"> 

<div id="JavaScript_JQuery"> 
    <script type="text/javascript" src="Javascript/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="Javascript/jquery-ui.js"></script> 
    <script type="text/javascript" src="Javascript/jUI.js"></script> 
</div>

好它的工作現在..但我有一個問題。每次點擊後圖像都會自動複製。你爲什麼認爲這是發生？以及如何解決它？

來源

2013-08-03 SynerFlow

這也將有助於也看到你的HTML標記。謝謝。 – DevlshOne

你有'親戚'位置的親戚嗎？ –

對我很好用http://jsfiddle.net/5ZJLT/ –

更新的每次點擊圓圈位置：

$(function() { 
    $(document).on('click', function(e) { 
     var radius = $('#circle').height()/2; 
     $('#circle').css({'left':e.pageX - radius, 'top':e.pageY - radius}); 
    });  
});

見活生生的例子： JSFiddle

與重複的問題似乎來自-webkit-drop-shadow。這只是一個糟糕的渲染。

來源

2013-08-03 15:17:32 nirazul

非常感謝！它現在完美運行！ – SynerFlow

你如何讓這個很酷的小jsFiddle按鈕？ :) – DevlshOne

與這些標籤，雖然在註釋中不起作用;） – nirazul

您的<script>標籤應該位於<head>部分，而不是頁身中的div。您還需要確保它們實際上是使用控制檯加載的。

$(document).ready(function() { 
    $(document).on('click',(function(e) { 
     var radius = $('#circle').height()/2; 
     $('#circle').css({position:'absolute', 'left':e.pageX-radius, 'top':e.pageY-radius}); 
    }); 
});

....如果你想圓的CENTER跟隨鼠標點擊。

來源

2013-08-03 03:27:51 DevlshOne

謝謝，但我的img根本不動。 – SynerFlow

通過JQuery將img的位置動態改變爲鼠標位置

回答

相關問題