div vicino cursore onclick jQuery

10

Io suggerirei di aggiungere un div nascosto:

<div id="message"> 
This is a message 
</div>

con i CSS:

#message { position: absolute; display: none; }

e poi mostrarlo:

$("#equipment").click(function(evt) { 
    $("#message").css({ 
    top: evt.pageY, 
    left: evt.pageX 
    }).toggle(); 
});

Ecco un esempio completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#equipment").click(function(evt) { 
    $("#message").css({ 
     top: evt.pageY + 5, 
     left: evt.pageX + 5 
    }).show(); 
    }); 
}); 
</script> 
<style type="text/css"> 
html, body, div { margin: 0; padding: 0; border: 0 none; } 
#wrapper { margin: 0 auto; width: 600px; } 
#equipment { color: green; } 
#message { display: none; position: absolute; text-align: center; padding: 10px; width: 120px; background: red; color: white; font-weight: bold; } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <span id="equipment">incididunt ut labore et dolore</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<div id="message">This is a message</div> 
</div> 
</body> 
</html>

fonte

2009-12-28 00:35:53 cletus

+0

Non sta accadendo nulla – Rickstar

+0

Beh, questo è un esempio operativo al 100%. Che cosa significa esattamente "non sta accadendo nulla"? – cletus

+0

tutte le opere sono originali. aggiungendo alcuni css e alcuni animates può ottenere un buon risultato – AEMLoviji

1

Fino a quando non ci danno informazioni più specifiche, ecco la soluzione:

$("span#equipment").click(function(){ 
    $(".invisiDiv").show(); // .toggle() if you need it to close with next click 
});

-

<p><span id="equipment">Equipment</span></p> 
<div class="invisiDiv" style="display:none;"> 
    <p>This div will be shown once you click on the span element above</p> 
</div>

Se avete bisogno di questo .invisiDiv a dire in prossimità del mouse in qualsiasi momento, è possibile riposizionarla in modo dinamico in base alle the current x/y position of the mouse:

$("span#equipment").click(function(e){ 
    $(".invisiDiv") 
    .css({top:e.pageX,left:e.pageY}) 
    .show(); // .toggle() if you need it to close with next click 
});

e aggiungere le seguenti regole CSS ad esso:

.invisiDiv { position:absolute; width:100px; height:15px; }

fonte

2009-12-28 00:32:27 Sampson

+0

Non succede niente – Rickstar

+0

Che cosa vuoi dire, Gully? – Sampson

2

un altro modo potrebbe essere come questo

HTML:

<span>click!</span>

Jquery:

$('span').click(function() 
{ 
    $(this).showDiv('<div>I AM DIV</div>'); 
}); 

//plugin 
jQuery.fn.showDiv = function (html) 
{ 
    var pos = $(this).position(); 
    $(html).insertAfter('span').css({ 
     position: "absolute", 
     top: (pos.top + 20) + "px",//customize top position 
     left: (pos.left) + "px"//customize left position 
    }).fadeIn(); 
    return this; 
}

Alcuni CSS: demo

div{ 
    background:red; 
    display:none;height:50px;width:50px 
} 
span{ 
    position:absolute; 
    top:20px; 
    left:50px; 
    background:green; 
}

Lavorare http://jsfiddle.net/a5Zxk/1/

fonte

2013-05-20 07:08:31 h0mayun

div vicino cursore onclick jQuery

risposta

Problemi correlati