> 웹 프론트엔드 > JS 튜토리얼 > jquery_jquery를 기반으로 한 스크롤 마우스 확대 이미지 효과

jquery_jquery를 기반으로 한 스크롤 마우스 확대 이미지 효과

WBOY
풀어 주다: 2016-05-16 18:00:04
원래의
1407명이 탐색했습니다.

오늘은 사진을 확대하고 축소하는 마우스 스크롤 기능을 실행해 보겠습니다. 인터넷에서 검색해 보면 나타나는 모든 예제는 모두 IE 브라우저만 지원하는 것으로 나타났습니다. 이 기능을 처리하는 해당 DOMMouseScroll이 있습니다. 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다. 다음과 같습니다:

$ (function(){
$(".body img").each(function(){
if($.browser.msie){
$(this).bind("mousewheel",function (e){
var e=e||event,v=e.wheelDelta||e.detail;
if(v>0)
resizeImg(this,false);//사진 확대
else
resizeImg(this,true);//이미지 축소
window.event.returnValue = false;//브라우저의 기본 스크롤 제거 event
//e.stopPropagation();
return false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail<0)
resizeImg (this,false);
else
resizeImg(this,true);
event.preventDefault()//브라우저 기본 스크롤 이벤트 제거

//event.stopPropagation() })
}
})
function resizeImg(node,isSmall){
if(!isSmall){
$( node).height($(node).height() *1.2);
}else
{
$(node).height($(node).height()*0.8); >}
}
});

이 기사의 데모를 보려면 여기를 클릭하세요.
사진 효과를 확대 및 축소하려면 마우스를 굴립니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿