二月激情视频,久久毛

首頁(yè) 免費(fèi)課用JS實(shí)現(xiàn)放大鏡特效問(wèn)答

用JS實(shí)現(xiàn)放大鏡特效

                
                姜維
            Web前端工程師

                    查看講師更多課程 
                    姜維講師的其他課程
                
jQuery插件——Validation Plugin
中級(jí)·65863
免費(fèi)課程
                                
jQM Web App –列車時(shí)刻表
中級(jí)·38481
免費(fèi)課程
                                
基于bootstrap的網(wǎng)頁(yè)開發(fā)
中級(jí)·187643
免費(fèi)課程
                                
WEB調(diào)試工具---Firebug
初級(jí)·77646
免費(fèi)課程
                                
網(wǎng)頁(yè)定位導(dǎo)航特效
初級(jí)·71390
免費(fèi)課程
                                
                難度初級(jí)
            
                時(shí)長(zhǎng)31分
            
                學(xué)習(xí)人數(shù)
            
綜合評(píng)分9.67
                            110人評(píng)價(jià)
                        查看評(píng)價(jià)
                                9.8
                                內(nèi)容實(shí)用
                            
                                9.6
                                簡(jiǎn)潔易懂
                            
                                9.6
                                邏輯清晰

全部評(píng)論問(wèn)答未解決精華

前端界的小學(xué)生

請(qǐng)那些小白看好了難度，中級(jí)，眼睛瞪大了，然后在bb。不能因?yàn)槟悖⒄`大家的時(shí)間，謝謝

0 4-1 用JS放大鏡特效實(shí)現(xiàn)

2016-08-30

冷眼看盡繁華丿

那個(gè)說(shuō)老師圖片比例寫死的，你是有多腦殘，offsetWidth 是干嘛的？

0 4-1 用JS放大鏡特效實(shí)現(xiàn)

2016-08-25

天神無(wú)所不能

寫代碼時(shí)候的音樂(lè)好吵~尤其我現(xiàn)在還感冒了

0 3-1 放大鏡特效設(shè)計(jì)

2016-08-19

遇見1993寒冬湖上的白云

音樂(lè)有干擾?。《悸犚魳?lè)去了

0 1-1 JS放大鏡特效簡(jiǎn)介

2016-08-13

精慕門3048457

最開始以為是取左邊的圖片顯示在右邊的圖上面，還在想怎么取。看到這知道是右邊本來(lái)就有一張圖片，這樣子就簡(jiǎn)單多了。

0 2-1 原理分析

2016-08-12

微積分2016

$("#mark").hover(function () {
// 顯示浮層和大圖片
$("#float-box").show();
$("#big-box").show();
},function () {
// 隱藏浮層和大圖片
$("#float-box").hide();
$("#big-box").hide();
});

1 6-1 編程挑戰(zhàn)

2016-08-04

微積分2016

// 越界處理
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);

1 6-1 編程挑戰(zhàn)

2016-08-04

微積分2016

// 顯示大圖
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"});

1 6-1 編程挑戰(zhàn)

2016-08-04

微積分2016

$(ele).offset().top;
$(ele).offset().left;
$(ele).offset({top:"100",left:"100"})
$(ele).position()

1 6-1 編程挑戰(zhàn)

2016-08-04

微積分2016

真希望不要使用IE

1 5-1 解決兼容性問(wèn)題

2016-08-04

微積分2016

// 大圖片運(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";

2 4-3 編程練習(xí)

2016-08-04

微積分2016

// 防止越界
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);

4 4-3 編程練習(xí)

2016-08-04