最開(kāi)始以為是取左邊的圖片顯示在右邊的圖上面,還在想怎么取??吹竭@知道是右邊本來(lái)就有一張圖片,這樣子就簡(jiǎn)單多了。
$("#mark").hover(function () {
// 顯示浮層和大圖片
$("#float-box").show();
$("#big-box").show();
},function () {
// 隱藏浮層和大圖片
$("#float-box").hide();
$("#big-box").hide();
});
// 顯示浮層和大圖片
$("#float-box").show();
$("#big-box").show();
},function () {
// 隱藏浮層和大圖片
$("#float-box").hide();
$("#big-box").hide();
});
2016-08-04
// 越界處理
pos.left=pos.left<smBoxLeft?smBoxLeft:(pos.left>smBoxLeft+smBoxW-floatBoxW?smBoxLeft+smBoxW-floatBoxW:pos.left);
pos.top=pos.top<smBoxTop?smBoxTop:(pos.top>smBoxTop+smBoxH-floatBoxH?smBoxTop+smBoxH-floatBoxH:pos.top);
$float_box.offset(pos);
pos.left=pos.left<smBoxLeft?smBoxLeft:(pos.left>smBoxLeft+smBoxW-floatBoxW?smBoxLeft+smBoxW-floatBoxW:pos.left);
pos.top=pos.top<smBoxTop?smBoxTop:(pos.top>smBoxTop+smBoxH-floatBoxH?smBoxTop+smBoxH-floatBoxH:pos.top);
$float_box.offset(pos);
2016-08-04
// 顯示大圖
var smX=pos.left-smBoxLeft;
var smY=pos.top-smBoxTop;
var bigX=-(smX*$big_box.width()/floatBoxW);
var bigY=-(smY*$big_box.height()/floatBoxH);
var bigPos={
X:Math.floor(bigX),
Y:Math.floor(bigY)
};
$("#big-box img").eq(0).css({"top":bigPos.Y+"px","left":bigPos.X+"px"});
var smX=pos.left-smBoxLeft;
var smY=pos.top-smBoxTop;
var bigX=-(smX*$big_box.width()/floatBoxW);
var bigY=-(smY*$big_box.height()/floatBoxH);
var bigPos={
X:Math.floor(bigX),
Y:Math.floor(bigY)
};
$("#big-box img").eq(0).css({"top":bigPos.Y+"px","left":bigPos.X+"px"});
2016-08-04
$(ele).offset().top;
$(ele).offset().left;
$(ele).offset({top:"100",left:"100"})
$(ele).position()
$(ele).offset().left;
$(ele).offset({top:"100",left:"100"})
$(ele).position()
2016-08-04
// 大圖片運(yùn)動(dòng)
var moveX=left;
var moveY=top;
var moveBX=-Math.floor((left*objBigBox.offsetWidth/objFloatBox.offsetWidth));
var moveBY=-Math.floor((top*objBigBox.offsetHeight/objFloatBox.offsetHeight));
objBigBoxImage.style.left=moveBX+"px";
objBigBoxImage.style.top=moveBY+"px";
var moveX=left;
var moveY=top;
var moveBX=-Math.floor((left*objBigBox.offsetWidth/objFloatBox.offsetWidth));
var moveBY=-Math.floor((top*objBigBox.offsetHeight/objFloatBox.offsetHeight));
objBigBoxImage.style.left=moveBX+"px";
objBigBoxImage.style.top=moveBY+"px";
2016-08-04
// 防止越界
left=left<0?0:(left>(objSmallBox.offsetWidth-objFloatBox.offsetWidth)?(objSmallBox.offsetWidth-objFloatBox.offsetWidth):left);
top=top<0?0:(top>(objSmallBox.offsetHeight-objFloatBox.offsetHeight)?(objSmallBox.offsetHeight-objFloatBox.offsetHeight):top);
left=left<0?0:(left>(objSmallBox.offsetWidth-objFloatBox.offsetWidth)?(objSmallBox.offsetWidth-objFloatBox.offsetWidth):left);
top=top<0?0:(top>(objSmallBox.offsetHeight-objFloatBox.offsetHeight)?(objSmallBox.offsetHeight-objFloatBox.offsetHeight):top);
2016-08-04
最贊回答 / happyuzhou
其實(shí)?的求解就是一個(gè)比例問(wèn)題,個(gè)人感覺(jué)老師的解法有點(diǎn)復(fù)雜。有x/A = ?/C,可以轉(zhuǎn)化為:?=x*C/A其實(shí)將老師的式子化簡(jiǎn)可以得到上式的x/(B-A) = ?/(D-C) ? 且有條件?B/A = D/C成立x/[(B/A-1)*A] = ?/[(D/C-1)*C](x/A)/(B/A-1) = (?/C)/(D/C-1) ? 分母相等有x/A = ?/C
2016-07-31
用JQzoom插件也可以實(shí)現(xiàn)上面的效果,但感覺(jué)滑動(dòng)顯示效果不太順暢,理解老師講的有助于理解插件。
2016-07-25
這個(gè) X/B-A = ?/ D-C 有點(diǎn)暈了,驗(yàn)證是對(duì)的,但是咋想出來(lái)了,
2016-07-19