0

这是我在一个程序中工作的
24 小时演示
的工作试用，所以我必须更改属性才能让它工作
我现在遇到的问题是让图像在悬停时达到 50%在使用 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 并将其拼凑在一起......

接下来我想删除标题并将其保留在浏览器窗口中，但小步骤
如果你显示我这个我希望我能弄清楚下一部分该怎么做？

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

我更喜欢使用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/

于 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 回答