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>
आप यही चाहते है? http://jsfiddle.net/hj57k/2731/ –
पहेली पर मैं div और कर्सर के बीच एक इंच के 1/8 से कम देख रहा हूं। आप 'बहुत अधिक जगह' पर विचार कर रहे हैं? क्या आप पाठ कर्सर पर केंद्रित चाहते हैं? आपकी साइट मेरे लिए लोड नहीं होगी (शायद मेरे अंत में फ़िल्टर, क्षमा करें)। – Gavin42
समस्या संरचना में div की स्थिति के साथ है। मैं div को सीधे # img-container में सेट करने की सलाह देता हूं और प्रत्येक छवि के लिए शीर्षक div रखने के बजाय छवि को किस छवि के आधार पर रखा जाता है, इस पर पाठ को बदलता हूं। शीर्षक का ऑफ़सेट अब इसके माता-पिता के सापेक्ष है और पृष्ठ – Spokey