0

これは、私が持っている
24 時間のデモ
の試用版です。プログラム内で作業しているので、これを機能させるには属性を変更する必要があります
。現在の問題は、ホバー時に画像を 50% にすることです。
デモに示されているようなファンシーボックスを 使用して大きな画像に移動する前にプレビューし ます
これは私が試したものですが、エラーがスローされます

    var offsetX = 20;
    var offsetY = 10;

$('a.nextfancy').hover(function(e) {
var href = $(this).attr('href');
$('<img id="largeImage" src="' + href + '" alt="big image" />')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});

$('a.nextfancy').mousemove(function(e) {
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});

----これを試しました-----

    var offsetX = 20;
    var offsetY = 10;
    var halfSize = {maxWidth:"50%", maxHeight: "50%"};

$('a.nextfancy').hover(function(e) {
var href = $(this).attr('href');
$('<img id="largeImage" src="' + href + '" alt="big image" />')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').animate(halfSize);
}, function() {
$('#largeImage').remove();
});

$('a.nextfancy').mousemove(function(e) {
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});

画像の Css が機能せず、ウィンドウ サイズの半分になります
。ゆっくりと自分自身で jQuery を学習し、これをまとめました...

次に、タイトルを削除してブラウザ ウィンドウに保持したいのですが、赤ちゃんの手順
を表示する場合私はこの次の部分を行う方法を理解できることを望んでいますか?

4

3 に答える 3

0

これが実際の例です：http：//jsfiddle.net/chphQ/

これを変更する必要があります：

$('a.nextfancy').hover(function(e) {
    var href = $(this).attr('href');
    $('<img id="largeImage" src="' + href + '" alt="big image" />').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX).appendTo('body');
}, function() {
    $('#largeImage').remove();
});

これに：

$('a.nextfancy').hover(function(e) {
    var href = $(this).attr('href');
    $('<img id="largeImage" src="' + href + '" alt="big image" height="50%" width="50%" />').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX).appendTo('body');
}, function() {
    $('#largeImage').remove();
});

3行目のheight属性とwidth属性の設定に注意してください。

于 2012-12-05T06:21:07.580 に答える
0

私はjquery関数width()を使用することを好みますheight()

現在の要素の高さと幅を取得し、必要な計算を行います

このようなことをしてください....

更新しました

var createdImg=$('<img id="largeImage" src="' + href + '" alt="big image" />')
 .css('top', e.pageY + offsetY)
 .css('left', e.pageX + offsetX)
 .appendTo('body');

createdImg.css({'width':createdImg.width() * 0.50,'height':createdImg.height() * 0.50})

フライで作成されたimgにcreatedImgという名前を付け、追加後に高さと幅の値を変更しています...

ここにフィドルがあります

http://jsfiddle.net/chphQ/1/

于 2012-12-05T06:24:33.247 に答える
0

最終的にcssを使用して解決し、スケーリングを使用する必要がありました。幅を追加してから、高さにautoを使用します。自動車は重要な部分です。

#largeImage {
position: absolute;
width:30%;
height: auto;
z-index:1000;
padding: 6px;
background: silver;
border: 1px solid black;
}
于 2012-12-06T19:35:03.317 に答える