Question

这是我的工作试验 24 hour Demo 我正在一个程序中工作，所以我必须更改属性才能使其工作
我现在遇到的问题是在使用之前将图像悬停在预览上以进行预览如同在Demo中显示的fancybox去大图像
这是我尝试的但是它会引发错误

    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和拼凑这个...

接下来我要删除标题＆amp;保持在浏览器窗口，但宝贝步骤
如果你告诉我这个，我希望我能弄清楚下一部分怎么做？

Answer 1

以下是一个工作示例：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行中高度和宽度属性的设置。

Answer 2

我更喜欢使用width()和height() jquery函数

它获取当前元素的高度和宽度...并执行所需的计算

做这样的事......

<强>已更新

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/

Answer 3

我终于使用css解决了它并且不得不使用缩放，在这里添加宽度然后使用auto作为高度。汽车是重要的部分。

#largeImage {
position: absolute;
width:30%;
height: auto;
z-index:1000;
padding: 6px;
background: silver;
border: 1px solid black;
}

我如何获得img宽度和高度的jQuery var到目前为止达到50％？

3 个答案: