JavaScript / jQuery - Follow the cursor with a DIV
-
- Posts: 48
JavaScript / jQuery - Follow the cursor with a DIV
How can I use JavaScript /jQuery to follow the mouse cursor with a DIV in the whole page?
Admin
If you want this effect with pure JavaScript, you can use this code:
- With jQuery, the same Div and CSS style, but with this code:
You can apply position "absolute" or "fixed" to the #div_moving in CSS.
- If you want the moving Div to follow the mouse inside a parent, you can use the code from this page: Follow the mouse cursor with a DIV inside a Parent.
Code: Select all
<style>
#div_moving {
position: absolute;
width: 140px;
height: 65px
margin: 0;
border: 1px solid #33f;
background: #88ee99;
}
</style>
<div id="div_moving">Some content ..</div>
<script>
var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp = 0;
var div_moving = document.getElementById('div_moving');
document.addEventListener('mousemove', function(e){
$mouseX = e.clientX;
$mouseY = e.clientY;
});
var $loop = setInterval(function(){
// change 5 to alter damping higher is slower
$xp += (($mouseX - $xp)/5);
$yp += (($mouseY - $yp)/5);
div_moving.style.left = $xp +'px';
div_moving.style.top = $yp +'px';
}, 60);
</script>
Code: Select all
<script>
var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;
$(document).mousemove(function(e){
$mouseX = e.pageX;
$mouseY = e.pageY;
});
var $loop = setInterval(function(){
// change 5 to alter damping higher is slower
$xp += (($mouseX - $xp)/5);
$yp += (($mouseY - $yp)/5);
$('#div_moving').css({left:$xp +'px', top:$yp +'px'});
}, 60);
</script>
- Demo of these codes is the green rectangle that follows your mouse cursor.
Some content ..
- If you want the moving Div to follow the mouse inside a parent, you can use the code from this page: Follow the mouse cursor with a DIV inside a Parent.
Similar Topics
-
jquery-select2 (not working)
Scripts from this website
First post
Dear admin I`m testing this script on my serverLast post
, but it does not work.
I simply did copy your code for a test on my XAMPP Version: 5.6.31...
Thank you for the support Admin,
i thought their was a problem with
the PHP-version or something else
It is working fine now (stupido me) -
Get name in fbautocomplete jquery plugin
JavaScript - jQuery - Ajax
First post
I`m almost their with my tag-systemLast post
But my second question for today: I can`t find-out how to detect the names from this javascript.
I can detect...
Yes, in that function.
Then, see in browser console (F12) what data is displayed. -
Adding jquery script to two buttons
JavaScript - jQuery - Ajax
First post
Dear admin I try to add two buttons in one off your scripts for opening via buttonLast post
but i cant find out what i`m doing wrong one is opening but...
Hello,
There is no attribute id_1 . You can change the value of an atribute, but not its name.
You can use the same js script for multiple buttons;... -
jQuery Hide and Show effect with data from php
JavaScript - jQuery - Ajax
First post
Dear Admin I would love to use this script, but their is a problem with the first record in my sql-table (DESC)Last post
The first record (DESC) is not...
The php, javascript and html codes are wrong mixed.
It is good to avoid mixing javascript code in php strings.
- Try this:
<?php
//your... -
Alert on jquery ajax requst when new response
JavaScript - jQuery - Ajax
First post
I have a jquery ajax function that is called every second, with setTimeout().Last post
I want an alert to pop up whenever a new message is received.
Here's...
Try something like this, store the previous response into a variable, and alert the message if response changed:
var msg_res =''; //store the...