js 圖片放大效果 修正版
更新時(shí)間:2010年05月19日 23:33:16 作者:
下面的演示可能存在一些與頁(yè)面JS沖突的問(wèn)題。如果想要演示或者完整的放大效果 html
首先:我們需要一個(gè)可以移動(dòng)的DIV
<div style="border:1px solid #CCC;position:absolute; width:200px; height:100px; cursor:move;" id="jelle_test_divquot;>
這個(gè)DIV 可以移動(dòng),你可以測(cè)試下。
</div>
<script type="text/javascript">
var getMouseP=function (e){//獲取鼠標(biāo)坐標(biāo) 請(qǐng)傳遞evnet參數(shù)
e = e || window.event;
var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };
return m;
};
move=function(o,t){
o=$j(o);
t=$j(t);
o.onmousedown=function(ev){
var mxy=getMouseP(ev);//獲取當(dāng)前鼠標(biāo)坐標(biāo)
var by={x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)};
o.style.cursor="move";
document.onmousemove=function(ev){
var mxy=getMouseP(ev);
t.style.left=mxy.x-by.x+"px";
t.style.top=mxy.y-by.y+"px";
};
document.onmouseup=function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.onmousemove=null;
}
}
}
move("jelle_test_div","jelle_test_div");
</script>
然后:我們需要控制他的移動(dòng)范圍
<div style="border:1px solid #CCC; width:500px; height:415px; background:url(xxx/c.jpg);" id="jelle_warpper">
<div style="width:100px; height:50px; border:1px solid #CCC;" id="jelle_move"></div>
</div>
<script type="text/javascript">
var mp=function (e){//獲取鼠標(biāo)坐標(biāo) 請(qǐng)傳遞evnet參數(shù)
e = e || window.event;
var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };
return m;
}
var move2=function(o,t){//請(qǐng)?zhí)崆霸O(shè)置CSS position:absolute;并激活filter:alpha(opacity=100);
//o相應(yīng)鼠標(biāo)拖動(dòng)的區(qū)域ID T被移動(dòng)對(duì)象的ID
o=$j(o);
t=$j(t);
by_o={x:o.offsetLeft,y:o.offsetTop};
o.onmousemove=function(ev){
//var mxy=Jelle.getMouseP(ev);//獲取當(dāng)前鼠標(biāo)坐標(biāo)
var by={x:t.offsetLeft,y:t.offsetTop};
var ms=mp(ev);
t.innerHTML=(by_o.x-by.x)+"---"+(by_o.x-by.y);
jy=ms.y-by_o.y-25;
jx=ms.x-by_o.x-50;
maxy=415-50;//減去移動(dòng)框的高度
maxx=500-100;//減去移動(dòng)框的寬度
var y=jy>=maxy?maxy:jy<=0?0:jy;
var x=jx>=maxx?maxx:jx<=0?0:jx;
t.style.marginTop=y+"px";
t.style.marginLeft=x+"px";
}
}
move2("jelle_warpper","jelle_move")
</script>
解決了上面的我問(wèn)題。那么這個(gè)效果就不難了。!
我們可以獲得了 一個(gè) x y, 恰好這個(gè) x y 可以用來(lái)設(shè)置大圖背景的 x y。
這里我們值得注意的事。要把握好大圖與小圖的比例。
還有就是顯示圖片的DIV 與移動(dòng)的DIV 比例。
比如我這里的比例: 大圖800*800 小圖是200*200
顯示大圖的DIV 200*200 移動(dòng)的div 50*50。
其實(shí)我還沒(méi)總結(jié)出這個(gè)公式。繞的有點(diǎn)頭暈呵呵。
下面我貼出全部代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<div style="border:1px solid #CCC;position:absolute; width:200px; height:100px; cursor:move;" id="jelle_test_divquot;>
這個(gè)DIV 可以移動(dòng),你可以測(cè)試下。
</div>
<script type="text/javascript">
var getMouseP=function (e){//獲取鼠標(biāo)坐標(biāo) 請(qǐng)傳遞evnet參數(shù)
e = e || window.event;
var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };
return m;
};
move=function(o,t){
o=$j(o);
t=$j(t);
o.onmousedown=function(ev){
var mxy=getMouseP(ev);//獲取當(dāng)前鼠標(biāo)坐標(biāo)
var by={x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)};
o.style.cursor="move";
document.onmousemove=function(ev){
var mxy=getMouseP(ev);
t.style.left=mxy.x-by.x+"px";
t.style.top=mxy.y-by.y+"px";
};
document.onmouseup=function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.onmousemove=null;
}
}
}
move("jelle_test_div","jelle_test_div");
</script>
然后:我們需要控制他的移動(dòng)范圍
復(fù)制代碼 代碼如下:
<div style="border:1px solid #CCC; width:500px; height:415px; background:url(xxx/c.jpg);" id="jelle_warpper">
<div style="width:100px; height:50px; border:1px solid #CCC;" id="jelle_move"></div>
</div>
<script type="text/javascript">
var mp=function (e){//獲取鼠標(biāo)坐標(biāo) 請(qǐng)傳遞evnet參數(shù)
e = e || window.event;
var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };
return m;
}
var move2=function(o,t){//請(qǐng)?zhí)崆霸O(shè)置CSS position:absolute;并激活filter:alpha(opacity=100);
//o相應(yīng)鼠標(biāo)拖動(dòng)的區(qū)域ID T被移動(dòng)對(duì)象的ID
o=$j(o);
t=$j(t);
by_o={x:o.offsetLeft,y:o.offsetTop};
o.onmousemove=function(ev){
//var mxy=Jelle.getMouseP(ev);//獲取當(dāng)前鼠標(biāo)坐標(biāo)
var by={x:t.offsetLeft,y:t.offsetTop};
var ms=mp(ev);
t.innerHTML=(by_o.x-by.x)+"---"+(by_o.x-by.y);
jy=ms.y-by_o.y-25;
jx=ms.x-by_o.x-50;
maxy=415-50;//減去移動(dòng)框的高度
maxx=500-100;//減去移動(dòng)框的寬度
var y=jy>=maxy?maxy:jy<=0?0:jy;
var x=jx>=maxx?maxx:jx<=0?0:jx;
t.style.marginTop=y+"px";
t.style.marginLeft=x+"px";
}
}
move2("jelle_warpper","jelle_move")
</script>
解決了上面的我問(wèn)題。那么這個(gè)效果就不難了。!
我們可以獲得了 一個(gè) x y, 恰好這個(gè) x y 可以用來(lái)設(shè)置大圖背景的 x y。
這里我們值得注意的事。要把握好大圖與小圖的比例。
還有就是顯示圖片的DIV 與移動(dòng)的DIV 比例。
比如我這里的比例: 大圖800*800 小圖是200*200
顯示大圖的DIV 200*200 移動(dòng)的div 50*50。
其實(shí)我還沒(méi)總結(jié)出這個(gè)公式。繞的有點(diǎn)頭暈呵呵。
下面我貼出全部代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- js放大鏡放大圖片效果
- JS簡(jiǎn)單的圖片放大縮小的兩種方法
- JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
- 鼠標(biāo)滑上去后圖片放大浮出效果的js代碼
- JavaScript圖片放大鏡效果代碼[代碼比較簡(jiǎn)單]
- JS實(shí)現(xiàn)點(diǎn)擊圖片在當(dāng)前頁(yè)面放大并可關(guān)閉的漂亮效果
- 移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
- JavaScript 圖片放大效果及代碼說(shuō)明
- js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法
- js實(shí)現(xiàn)用滾動(dòng)條來(lái)放大縮小圖片的代碼
- JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例
相關(guān)文章
javascript dom代碼應(yīng)用 簡(jiǎn)單的相冊(cè)[firefox only]
最近一直對(duì)前端開(kāi)發(fā)很感興趣,特別是在像jquery這種流行ajax類(lèi)庫(kù)的幫助下,即使沒(méi)有很好的javascript功底也能做出不錯(cuò)的動(dòng)態(tài)效果,確實(shí)是方便。2010-06-06純js無(wú)flash仿搜狐女人頻道FLASH圖片切換效果代碼
2008-01-01javascript 火狐(firefox)不顯示本地圖片問(wèn)題解決
在Firefox一直不能用js做出圖片預(yù)覽的效果,下面這個(gè)即可解決,用替換的方法實(shí)現(xiàn)firefox支持得的路徑格式2008-07-07