js鼠标滑轮缩放图片障蔽滚动条
日期：2014-05-16 浏览次数：20506 次
js鼠标滑轮缩放图片屏蔽滚动条
在做一个鼠标滑轮缩放图片，滚动滑轮浏览器的滚动条一起滚动，经过一番折腾，终于解决了，贴出来给有有需要的人参考下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
</head>
<body>
</body>
<script>
var n=1;
function pingbi(e){
if (e&&e.preventDefault) { // Firefox
e.preventDefault();
e.stopPropagation();
} else { // IE
window.event.returnvalue=false
// window.event.keyCode = -1;
return false;
}
}
function xiufu(e){
if (e&&e.preventDefault) { // Firefox
e.preventDefault();
e.stopPropagation();
} else { // IE
window.event.returnvalue=true;
// window.event.keyCode = -1;
return true;
}
}
function mwEvent(e)
{
pingbi(e);
if (!e) e = window.event;
//alert(e.keyCode);
//if(e.preventDefault)e.preventDefault();
//else e.returnvalue=false;
//alert(e.keyCode);
if ( e.wheelDelta <= 0 || e.detail > 0) {
if(n<3)
n+=0.1;
}
else {
if(n>1)
n-=0.1;
}
img(n);
window.status=n;
document.getElementById("show").innerHTML=n;
}
function pbie(){
document.onmousewheel= pingbi;
}
function xfie(){
document.onmousewheel= xiufu;
}
var width,height;
function img(n){
document.getElementById("test").width=width*n;
document.getElementById("test").height=height*n;
}
//if(document.attachEvent){
//document.attachEvent("onmousewheel",mwEvent);
//}else{
//window.addEventListener("DOMMouseScroll", mwEvent, false);
//}
//window.onscroll=function(e){alert(window.event.keyCode);};
function init(){
var tt=document.getElementById("test");
tt.onmouseover=pbie;
tt.onmouseout=xfie;
if(tt.attachEvent){
tt.attachEvent("onmousewheel",mwEvent);
}else{
tt.addEventListener("DOMMouseScroll", mwEvent, false);
}
width =document.getElementById("test").width;
height=document.getElementById("test").height;
}
</script>
<body onLoad="init()">
<p>只有第一张图片会缩放，并解决ie下滑轮滚动滚动条一起滚动的问题</p>
<div style="position:relative;height:400px;width:400px;overflow:hidden;border:2px solid #ccf;">
<img src="te2.jpg" id="test" width="350" height="350"/><br/>
</div>
<img src="test.jpg" width="350" height="350"/><br/>
<img src="test.jpg" width="350" height="350"/><br/>
<img src="test.jpg" width="350" height="350"/><br/>
<div id="show">----</div>
</body>
</html>
在做一个鼠标滑轮缩放图片，滚动滑轮浏览器的滚动条一起滚动，经过一番折腾，终于解决了，贴出来给有有需要的人参考下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
</head>
<body>
</body>
<script>
var n=1;
function pingbi(e){
if (e&&e.preventDefault) { // Firefox
e.preventDefault();
e.stopPropagation();
} else { // IE
window.event.returnvalue=false
// window.event.keyCode = -1;
return false;
}
}
function xiufu(e){
if (e&&e.preventDefault) { // Firefox
e.preventDefault();
e.stopPropagation();
} else { // IE
window.event.returnvalue=true;
// window.event.keyCode = -1;
return true;
}
}
function mwEvent(e)
{
pingbi(e);
if (!e) e = window.event;
//alert(e.keyCode);
//if(e.preventDefault)e.preventDefault();
//else e.returnvalue=false;
//alert(e.keyCode);
if ( e.wheelDelta <= 0 || e.detail > 0) {
if(n<3)
n+=0.1;
}
else {
if(n>1)
n-=0.1;
}
img(n);
window.status=n;
document.getElementById("show").innerHTML=n;
}
function pbie(){
document.onmousewheel= pingbi;
}
function xfie(){
document.onmousewheel= xiufu;
}
var width,height;
function img(n){
document.getElementById("test").width=width*n;
document.getElementById("test").height=height*n;
}
//if(document.attachEvent){
//document.attachEvent("onmousewheel",mwEvent);
//}else{
//window.addEventListener("DOMMouseScroll", mwEvent, false);
//}
//window.onscroll=function(e){alert(window.event.keyCode);};
function init(){
var tt=document.getElementById("test");
tt.onmouseover=pbie;
tt.onmouseout=xfie;
if(tt.attachEvent){
tt.attachEvent("onmousewheel",mwEvent);
}else{
tt.addEventListener("DOMMouseScroll", mwEvent, false);
}
width =document.getElementById("test").width;
height=document.getElementById("test").height;
}
</script>
<body onLoad="init()">
<p>只有第一张图片会缩放，并解决ie下滑轮滚动滚动条一起滚动的问题</p>
<div style="position:relative;height:400px;width:400px;overflow:hidden;border:2px solid #ccf;">
<img src="te2.jpg" id="test" width="350" height="350"/><br/>
</div>
<img src="test.jpg" width="350" height="350"/><br/>
<img src="test.jpg" width="350" height="350"/><br/>
<img src="test.jpg" width="350" height="350"/><br/>
<div id="show">----</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
