Home > Web Front-end > JS Tutorial > body text

Scroll mouse zoom-in image effect based on jquery_jquery

WBOY
Release: 2016-05-16 18:00:04
Original
1382 people have browsed it

Today we are going to launch a mouse scrolling function to zoom in and out pictures. It seems very simple. After searching on the Internet, all the examples that appear are onmousewheel examples. All of them only support IE browser. It turns out that Firefox has a corresponding DOMMouseScroll to handle this function. The code is as follows, with the following comments:

Copy the code The code is as follows:

$ (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);//Enlarge the picture
else
resizeImg(this,true);//Reduce the image
window.event.returnValue = false;//Remove the browser's default scroll event
//e.stopPropagation();
return false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail<0)
resizeImg (this,false);
else
resizeImg(this,true);
event.preventDefault()//Remove the browser default scroll event

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

For the demo of this article, please click here: Roll the mouse to zoom in and out the picture effect
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template