> 웹 프론트엔드 > JS 튜토리얼 > 더욱 편리한 onMouseWheel 확대 사진 효과 [원본]_이미지 특수 효과

더욱 편리한 onMouseWheel 확대 사진 효과 [원본]_이미지 특수 효과

WBOY
풀어 주다: 2016-05-16 19:26:34
원래의
1151명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

🎜>< ;meta http-equiv="Content-Type" content="text/html; charset=gb2312">
onMouseWheel 확대/축소 이미지 효과-www.jb51.Net >

function bbimg(o)
{
var Zoom=parseInt(o.style.zoom, 10)||100> Zoom =event .wheelDelta/ 12;
if (zoom>0) o.style.zoom=zoom '%';
}
function addthis()
{
var e=window.event? window.event :e
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return
//author:reterry(dxy) www.jb51.net 무단전재를 환영하며, 전재시 출처를 밝혀주시기 바랍니다.
if (String(srcE.tagName).toLowerCase()=='img'){
//alert('OK')
bbimg(srcE)
}
}
function backthis(){
var e=window.event?window.event:e;
var srcE=e.srcElement?e.srcElement:e.target
if(!srcE) return ;
//author:reterry(dxy) www.jb51.net 전재를 환영합니다. 전재시 출처를 밝혀주세요.
if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey)){
//alert('OK')
srcE.style .zoom='100%';
}}
document.onmousewheel=addthis;
document.onmouseout=backthis;
>
효과를 보려면 마우스 휠로 스크롤하세요. 작성자:reterry(dxy) www.jb51.net 재인쇄를 환영합니다. 재인쇄 시 출처를 명시해 주세요.
Ctrl 키를 누른 채 이미지에서 마우스를 멀리 이동하면 원래 크기로 복원됩니다







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