Pages

0

練習 - 圖片前後差異展示


點選上面這張圖片就可以看到效果~

這是模仿之前大海嘯日本衛星空照圖前後對照圖的一個效果
在網路上也有相同的 plugin 可以下載
但是想說必須了解真正的原理
就用 jquery 做了一個ㄎㄎ
白人黑人變變變，還滿有趣的吧~
原理其實不難
最主要還是在CSS與jquery的互相作用

CSS程式碼
#div1{position:absolute; top:40px; left:50px; width:298px; height:385px; z-index:10; background:url(img/20120511_faceOff.jpg) -300px 0 no-repeat; 
border-right:3px solid #09b; border-top:1px solid #000; border-left:1px solid #000; border-bottom1:1px solid #000;}
#div2{position:absolute; top:40px; left:50px; width:300px; height:385px; z-index:9; background:url(img/20120511_faceOff.jpg) 0 0 no-repeat;border:1px solid #000;}
#bar{position:absolute; top:220px; left:344px; width:12px; height:40px; background-color:#069; cursor:e-resize; z-index:100;}
.divCantSelect{ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;cursor:e-resize;}
#pull{font-size:14px; font-family:Arial; position:absolute; top:230px; left:365px;}

jquery程式碼
$(function(){
 var mouse_cx,mouse_cy,mouse_mx,mouse_my,dx,dy,cw,ch,cx,cy,a,b;

 $("#bar").mousedown(md);
 $(window).mouseup(mu);

 function md(c){
  $("#pull").fadeOut();
  $("body").addClass("divCantSelect");
  mouse_cx=c.pageX;
  mouse_cy=c.pageY;
  cw=$("#div1").width();
  ch=$("#div1").height();
  cx=$(this).offset().left;
  cy=$(this).offset().top;

  $(window).bind("mousemove",function(m){
   mouse_mx=m.pageX;
   mouse_my=m.pageY;
   dx=mouse_mx-mouse_cx;
   dy=mouse_my-mouse_cy;
   a=cx+dx;
   if(a<=46){a=46;}
   if(a>=344){a=344;}
   b=cw+dx;
   if(b>=298){b=298;}
   if(mouse_mx<=49){b=0;}

   $("#div1").css({"width":b+"px"});
   $("#bar").css({"left":a+"px"});
  });
 }
 function mu(){
  $(window).unbind("mousemove");
  $("body").removeClass("divCantSelect");
 }
})

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言