js 사진 확대 효과 수정 버전_이미지 특수 효과

먼저 이동 가능한 DIV가 필요합니다

코드 복사 코드는 다음과 같습니다.

이 DIV는 이동 가능하며 테스트할 수 있습니다. var getMouseP=function (e){//마우스 좌표를 얻으려면 evnet 매개변수 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);//현재 마우스 좌표 가져오기 var by={ x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)} o.style.cursor="move" 문서. 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")

그러면 그를 조종해야 합니다

코드 복사 의 이동 범위는 다음과 같습니다. style="width:100px; height:50px; border: 1px solid #CCC;" id="jelle_move"> var mp=function (e ){//마우스 좌표를 얻으려면 evnet 매개변수를 전달하세요 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 - 문서. body.clientTop }; return m; } var move2=function(o,t){//CSS position:absolute;를 설정하고 filter:alpha(opacity=100)를 활성화하세요. >//o마우스 드래그에 해당하는 영역 ID T가 이동됩니다. Object ID o=$j(o) t=$j(t) by_o={x:o.offsetLeft, y:o.offsetTop}; o.onmousemove =function(ev){ //var mxy=Jelle.getMouseP(ev);//현재 마우스 좌표 가져오기 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;//이동 높이를 뺍니다. box maxx=500-100;//움직임 빼기 상자 너비 var y=jy>=maxy?maxy:jy var x=jx> =maxx?maxx:jx t.style.marginTop=y "px"; t.style.marginLeft=x "px" } } move2("jelle_warpper","jelle_move") &lt ;/script>

위의 문제를 해결했습니다. 그렇다면 이 효과는 어렵지 않습니다. ! 큰 그림 배경의 xy를 설정하는 데 사용되는 xy를 얻을 수 있습니다. 여기서 주의할 점. 큰 그림과 작은 그림의 비율을 파악하는 것이 필요합니다. 이미지를 표시하는 DIV와 움직이는 DIV의 비율도 있습니다. 예를 들어 여기서 비율은 다음과 같습니다. 큰 이미지는 800*800, 작은 이미지는 200*200 큰 이미지를 표시하는 DIV는 200*200, 움직이는 div는 50*50입니다. 사실 저는 아직 이 공식을 생각해내지 못했습니다. 좀 현기증이 나네요 하하. 아래 코드는 모두 게시합니다.

사진 확대 효과

.img_box,.show_box{border:1px solid #CCC; width:200px;height:200px;float:left;float:left;margin:20px;margin:20px; overflow:hidden;} .img_box,.show_box{ background-position:0 0; background-repeat:no-repeat; } .ms_box{width:50px; height:50px;border:1px solid #CCC;background:#000;filter:alpha(opacity=20);opacity:0.2; display:none} .show_box{display:none}

js 사진 확대 효과 수정 버전_이미지 특수 효과

관련 기사