please check demo :
http://gopalkaroli.blogspot.in/2012/10/zoom-image-on-scroll-mouse-wheel-demo.html

using following source code:

var count=1;
function MouseScrollWheel(event) {

var rolled = 0;
if (‘wheelDelta’ in event) {
rolled = event.wheelDelta;
}
else { // Firefox
// The measurement units of the detail and wheelDelta properties are different.
rolled = -40 * event.detail;
}

var yourImg = document.getElementById(“imgTest”);
if(rolled >0)
{

if(yourImg && yourImg.style) {
yourImg.height = yourImg.height * 1.1;
yourImg.width = yourImg.width * 1.1;
}

}
else
{

if(yourImg && yourImg.style) {
yourImg.height = yourImg.height * 0.9;
yourImg.width = yourImg.width * 0.9;
}
}
}
function Init (value) {

// for mouse scrolling in Firefox
var element = document.getElementById (value.id);
if (element.addEventListener) { // all browsers except IE before version 9
// Internet Explorer, Opera, Google Chrome and Safari
element.addEventListener (“mousewheel”, MouseScrollWheel, false);
// Firefox
element.addEventListener (“DOMMouseScroll”, MouseScrollWheel, false);
}
else {
if (element.attachEvent) { // IE before version 9
element.attachEvent (“onmousewheel”, MouseScrollWheel);
}
}
}

function mouseDown(e) {
e = e || window.event;
switch (e.which) {
case 1:
count=count+0.1;
var yourImg = document.getElementById(‘imgTest’);
if(yourImg && yourImg.style) {
yourImg.height = yourImg.height * count;
yourImg.width = yourImg.width *count;
}
break;
case 2: count=count+0.1;
var yourImg = document.getElementById(‘imgTest’);
if(yourImg && yourImg.style) {
yourImg.height = yourImg.height * count;
yourImg.width = yourImg.width *count;
}
break;
case 3:
var yourImg = document.getElementById(‘imgTest’);
if(yourImg && yourImg.style) {
yourImg.height = yourImg.height *0.9;
yourImg.width = yourImg.width *0.9;
}
break;
}
}
function bigImg()
{
var x= document.getElementById(‘mainBody’);

x.style.overflow=”hidden”;

}

function normalImg()
{

var x=document.getElementById(‘mainBody’);
x.style.overflow=”auto”;
}

Advertisements