All geek questions in one place

How to allow div to stick

I have a script that shows a hang of a div and binds it to a cursor.

$(".picture_holder_thumb").mouseover(function () { $(".title", this).show(); }); $(".picture_holder_thumb").mouseout(function () { $(".title", this).hide(); }); $(document).bind('mousemove', function (e) { $(".title", this).css({ left: e.pageX, top: e.pageY }); });

This works, but somehow there is always a lot of space between the sticky div and the cursor.

This is my CSS Div:

 #img-container .captioning .title { width: auto; height:auto; position: absolute; float:left; z-index:1; display: none; }

Is there something wrong with my JS? I am grateful for any help!

Here you can see it live with the problem: http://www.cyrill-kuhlmann.de/index.php/projects

This is an example script from which I got JS: http://jsfiddle.net/hj57k/

+5
source share
4 answers

Here is a nice clean javascript and an easy way to make a div pointer a cursor. We can also remove css and make the whole style using javascript in the same way:

 document.addEventListener('mousemove', function(ev){ document.getElementById('acab').style.transform = 'translateY('+(ev.clientY-80)+'px)'; document.getElementById('acab').style.transform += 'translateX('+(ev.clientX-100)+'px)'; },false); 
 #acab { transition: transform 0.23s; } 
 <div id="acab"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Anarchist_black_cat.svg/150px-Anarchist_black_cat.svg.png"></img> </div>
+1
source 

 var mouseX = 0, mouseY = 0; $(document).mousemove(function(e){ mouseX = e.pageX; mouseY = e.pageY; }); var follower = $("#follower"); var xp = 40, yp = 40; var loop = setInterval(function(){ // change 12 to alter damping higher is slower xp += (mouseX - xp) / 12 -1; yp += (mouseY - yp) / 12 -1; follower.css({left:xp, top:yp}); }, 30); 
 #follower{ position: absolute; padding:10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="follower">mouse</div>
+6
source

Try this (according to the fiddle):

 $(document).bind('mousemove', function(e){ var width = $('#tail').width()/2; $('#tail').css({ left: e.pageX-width, top: e.pageY }); });
+1
source

Another sticky button solution.

 var xp=0, yp = 0, rx, ry, loop, mouseX = 0, mouseY = 0, t = $('#follower'); $(document).mousemove(function(e){ mouseX = e.pageX; mouseY = e.pageY; }); t.mousemove(function(){ var parentOffset = $(this).offset(); rx = (mouseX - (parentOffset.left))*2; ry = (mouseY - (parentOffset.top))*2; //console.log(rx+'.'+ry); }); t.mouseenter(function(){ clearInterval(loop); loop = setInterval(function(){ xp += ((rx-50) - xp) / 4-1; yp += ((ry-50) - yp) / 4-1; t.css({left:xp, top:yp}); }, 30); }); t.mouseout(function(e){ clearInterval(loop); loop = setInterval(function(){ xp += (0 - xp) / 3-1; yp += (0 - yp) / 3-1; t.css({left:xp, top:yp}); }, 30); }); 
 #home{ position: absolute; width:50px; height:50px; top:100px; left:100px; } #follower{ position: absolute; width:50px; height:50px; background:#777; z-index:5; cursor:pointer; color: #fff; background: #00b6f4; border-radius: 6px; border-bottom: 2px solid #009dd3; } #follower:hover{ -webkit-animation-name: shake-little; -webkit-animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -webkit-animation-play-state: running; } @-webkit-keyframes shake-little { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 2% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 4% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 6% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 8% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 10% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 12% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 18% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 20% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 22% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 24% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 26% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 28% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 30% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 32% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 34% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 36% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 38% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 42% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 44% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 46% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 48% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 50% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 52% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 54% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 56% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 58% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 60% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 62% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 64% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 66% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 70% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 72% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 74% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 76% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 78% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 80% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 82% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 84% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 88% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 90% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 92% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 94% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 96% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 98% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="home"><div id="follower"></div></div>
0
source

Source: https://habr.com/ru/post/1202973/

More articles:


All Articles