js 圖片放大效果 修正版
更新時間:2010年05月19日 23:33:16 作者:
下面的演示可能存在一些與頁面JS沖突的問題。如果想要演示或者完整的放大效果 html
首先:我們需要一個可以移動的DIV
<div style="border:1px solid #CCC;position:absolute; width:200px; height:100px; cursor:move;" id="jelle_test_divquot;>
這個DIV 可以移動,你可以測試下。
</div>
<script type="text/javascript">
var getMouseP=function (e){//獲取鼠標(biāo)坐標(biāo) 請傳遞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>
然后:我們需要控制他的移動范圍
<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) 請傳遞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){//請?zhí)崆霸O(shè)置CSS position:absolute;并激活filter:alpha(opacity=100);
//o相應(yīng)鼠標(biāo)拖動的區(qū)域ID T被移動對象的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;//減去移動框的高度
maxx=500-100;//減去移動框的寬度
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>
解決了上面的我問題。那么這個效果就不難了。!
我們可以獲得了 一個 x y, 恰好這個 x y 可以用來設(shè)置大圖背景的 x y。
這里我們值得注意的事。要把握好大圖與小圖的比例。
還有就是顯示圖片的DIV 與移動的DIV 比例。
比如我這里的比例: 大圖800*800 小圖是200*200
顯示大圖的DIV 200*200 移動的div 50*50。
其實我還沒總結(jié)出這個公式。繞的有點頭暈呵呵。
下面我貼出全部代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<div style="border:1px solid #CCC;position:absolute; width:200px; height:100px; cursor:move;" id="jelle_test_divquot;>
這個DIV 可以移動,你可以測試下。
</div>
<script type="text/javascript">
var getMouseP=function (e){//獲取鼠標(biāo)坐標(biāo) 請傳遞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>
然后:我們需要控制他的移動范圍
復(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) 請傳遞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){//請?zhí)崆霸O(shè)置CSS position:absolute;并激活filter:alpha(opacity=100);
//o相應(yīng)鼠標(biāo)拖動的區(qū)域ID T被移動對象的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;//減去移動框的高度
maxx=500-100;//減去移動框的寬度
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>
解決了上面的我問題。那么這個效果就不難了。!
我們可以獲得了 一個 x y, 恰好這個 x y 可以用來設(shè)置大圖背景的 x y。
這里我們值得注意的事。要把握好大圖與小圖的比例。
還有就是顯示圖片的DIV 與移動的DIV 比例。
比如我這里的比例: 大圖800*800 小圖是200*200
顯示大圖的DIV 200*200 移動的div 50*50。
其實我還沒總結(jié)出這個公式。繞的有點頭暈呵呵。
下面我貼出全部代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- js放大鏡放大圖片效果
- JS簡單的圖片放大縮小的兩種方法
- JS實現(xiàn)鼠標(biāo)移動到縮略圖顯示大圖的圖片放大效果
- 鼠標(biāo)滑上去后圖片放大浮出效果的js代碼
- JavaScript圖片放大鏡效果代碼[代碼比較簡單]
- JS實現(xiàn)點擊圖片在當(dāng)前頁面放大并可關(guān)閉的漂亮效果
- 移動端點擊圖片放大特效PhotoSwipe.js插件實現(xiàn)
- JavaScript 圖片放大效果及代碼說明
- js實現(xiàn)雙擊圖片放大單擊縮小的方法
- js實現(xiàn)用滾動條來放大縮小圖片的代碼
- JS與CSS3實現(xiàn)圖片響應(yīng)鼠標(biāo)移動放大效果示例
相關(guān)文章
javascript dom代碼應(yīng)用 簡單的相冊[firefox only]
最近一直對前端開發(fā)很感興趣,特別是在像jquery這種流行ajax類庫的幫助下,即使沒有很好的javascript功底也能做出不錯的動態(tài)效果,確實是方便。2010-06-06javascript 火狐(firefox)不顯示本地圖片問題解決
在Firefox一直不能用js做出圖片預(yù)覽的效果,下面這個即可解決,用替換的方法實現(xiàn)firefox支持得的路徑格式2008-07-07