JQuery와 onMouseover와 이미지 크기 증가

Question

나는 마우스가 이미지를 가리킬 때 그것의 크기의 50 %로 크게 성장하고 그 지역 밖으로 마우스 움직임에 따라 즉시 돌아갑니다 영향을하려합니다. jquery로이 작업을 수행 할 수 있습니까? 방법? jquery없이이 작업을 수행 할 수 있습니까? jquery없이 그것을하는 것이 얼마나 힘들겠습니까? 당신은 또한 일반 자바 스크립트를 사용할 수 있습니다

Answer 1

당신이 이동 :

$('img').load(function() { 
    $(this).data('height', this.height); 
}).bind('mouseenter mouseleave', function(e) { 
    $(this).stop().animate({ 
     height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1) 
    }); 
}); 

라이브 데모 :http://jsfiddle.net/simevidas/fwUMx/5/

Answer 2

자바 스크립트라이브러리, 등 alors입니다 jQuery를,이 작업을 수행 할 수 있습니다.

jQuery를 :

var $image = $('#imageID'), //Or some other selector 
    imgWidth = $image.width(), 
    imgHeight = $image.height(); 
$('#imageID').hover(function() { 
    //The mouseover 
    $(this).width(imgWidth * 2); 
    $(this).height(imgHeight * 2);  
}, function() { 
    $(this).width(imgWidth); 
    $(this).height(imgHeight); 
}); 

일반 자바 스크립트 : 여기
참조 예 : 여기 http://jsfiddle.net/axpVw/

var image = document.getElementById('imageID'), 
    imageWidth = image.width, 
    imageHeight = image.height; 
image.onmouseover = function() { 
    image.width = 2 * imageWidth; 
    image.height = 2 * imageHeight; 
} 
image.onmouseout = function() { 
    image.width = imageWidth; 
    image.height = imageHeight; 
} 

Answer 3

당신은 순수 CSS를 사용하여이 작업을 수행 할 수 있습니다. 다음은 running sample입니다.

을 감안할 때이 HTML : 대상 브라우저 중 하나가 괜찮은 CSS를 지원하지 않는 경우

body { background-color: black } 
.foo { 
    height:25px; 
} 
.foo:hover { 
    height:50px; 
} 

사용 jQuery를,하지만 난 IE8에서 테스트하고 지원 :

<img class="foo" src="/img/logo.png"> 

이 CSS 추가 이.

Answer 4

그것은 두 가지 방법으로 쉬운 작업입니다.

1. JQuery와 : http://jsfiddle.net/G7yTU/

   $(document).ready(function(){  
   var ht= $("img").height(),  
   wd=$("img").width(),  
   mult=1.5; //change to the no. of times you want to increase your image 
        //size. 
   $("img").on('mouseenter', function(){ 
   $(this).animate({height: ht*mult, 
          width: wd*mult}, 500); 
   }); 
   $("img").on('mouseleave', function(){ 
   $(this).animate({height: ht, 
          width: wd}, 500); 
   }) 
   }); 
   

2. CSS : http://jsfiddle.net/zahAB/1/

   img{ 
   -webkit-transition:all 0.5s; 
   -moz-transition:all 0.5s; 
   -ms-transition:all 0.5s; 
   -o-transition:all 0.5s; 
       } 
   
   img:hover{ 
       width:150px; 
       height:150px; 
   } 
   

당신이 만약 내가 두 가지의 예와 당신을 위해 바이올린을 필요한 것 도움이 필요하면 연락하십시오.