[英]jQuery image hover/float next to cursor when hover over any “a” link?
Hi i have this code sample from This Post. 嗨,我有这篇文章的代码示例。 What i want is a png image to display next to the cursor when the cursor goes over a hyperlink or any kind of "a" link.
我想要的是当光标经过超链接或任何类型的“ a”链接时,在光标旁边显示的png图像。
Here's the original: 这是原始的:
var $img = $('img');
$img.hide();
$('div').mousemove(function(e) {
$img.stop(1, 1).fadeIn();
$('img').offset({
top: e.pageY - $img.outerHeight(),
left: e.pageX - $img.outerWidth()
});
}).mouseleave(function() {
$img.fadeOut();
});
HTML: HTML:
<div>
<img src="http://i574.photobucket.com/albums/ss184/wsganewsletter/Other/Icon-Mega.png"
/>
</div>
and here's the version i tried to modify without using HTML and loading the image only through jQuery :S 这是我尝试不使用HTML并仅通过jQuery加载图像而修改的版本:S
*var img = $("../Cursor.png");
$img.hide();
$('a').mousemove(function(e) {
$img.stop(1, 1).fadeIn();
$('img').offset({
top: e.pageY - $img.outerHeight(),
left: e.pageX - ($img.outerWidth()/2)
});
}).mouseleave(function() {
$img.fadeOut();
});?
I'm sure it's a relatively easy fix and i'm still leaning, could you please help me. 我敢肯定,这是一个相对容易的解决方法,而且我仍在努力,请您帮我一下。 Thanks :)
谢谢 :)
This is exactly what you are needing. 这正是您所需要的。
<script type="text/javascript">
$(document).ready(function() {
var $img = $("#cursor");
$img.hide();
$('a').mousemove(function(e) {
$img.stop(1, 1).fadeIn();
$img.offset({
top: e.pageY - $img.outerHeight(),
left: e.pageX - ($img.outerWidth()/2)
});
}).mouseleave(function() {
$img.fadeOut();
});
});
</script>
<img id="cursor" src="http://i574.photobucket.com/albums/ss184/wsganewsletter/Other/Icon-Mega.png" style="position: absolute">
<a href="#">hover me</a>
您需要像这样设置img标签:
var img = $('<img src="../Cursor.png"/>');
您必须构造DOM元素-类似:
var img = $("<img id='myimg' src='../Cursor.png' />");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.