1

こんにちは私はこの投稿からこのコードサンプルを持っています。私が欲しいのは、カーソルがハイパーリンクまたは任意の種類の「a」リンク上にあるときにカーソルの横に表示されるpng画像です。

オリジナルは次のとおりです。

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：

<div>
<img src="http://i574.photobucket.com/albums/ss184/wsganewsletter/Other/Icon-Mega.png"    
/>
</div>

これが、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();
});?

比較的簡単な修正だと思いますが、まだ傾いています。助けていただけませんか。ありがとう ：）

4

3 に答える 3

2

これはまさにあなたが必要としているものです。

<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>
于 2012-11-15T07:58:47.483 に答える
0

次のような img タグを設定する必要があります。

var img = $('<img src="../Cursor.png"/>');
于 2012-11-15T07:44:40.810 に答える
0

次のような DOM 要素を作成する必要があります。

var img = $("<img id='myimg' src='../Cursor.png' />");
于 2012-11-15T07:44:44.540 に答える