在做一个鼠标滑轮缩放图片，滚动滑轮浏览器的滚动条一起滚动，经过一番折腾，终于解决了，贴出来给有有需要的人参考下：
<!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>
分享到：
相关推荐
在网页设计中，动态的图片展示效果可以提升用户体验，其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能，来实现图片随着页面滚动而优雅地...
js鼠标滚动缩放图片 可拖拽，类似百度地图
改windows的鼠标滑轮滚动方向的指处理程序 自然滚动.bat 下载执行就可以更改，免去手动改注册表的麻烦
本文将深入探讨如何使用易语言来实现“鼠标滑轮控制图片框大小”的功能。这个功能通常应用于图像查看器或者图像编辑软件中，通过鼠标的滚轮操作，可以方便地缩放图片，以便更细致地观察或调整图像。 首先，我们需要...
本主题聚焦于一个特定的应用场景：“jQuery滚动条缩放图片”，这是一种增强用户体验的创新技术，它允许图片在用户滚动页面时动态地放大或缩小，创造出视觉上的吸引力。 首先，我们需要理解jQuery中的核心概念。...
**鼠标滑轮滚动事件详解** 在计算机用户界面中，鼠标滑轮滚动事件是与用户交互密切相关的一个重要元素，尤其在浏览网页、查看文档或者使用各种应用程序时，它提供了方便快捷的浏览方式。本文将深入探讨鼠标滑轮滚动...
"js房产网站大小缩放图片滚动展示"这一技术就是为了让网站中的图片根据屏幕尺寸自适应缩放，并实现平滑滚动效果，从而提供优秀的用户体验。下面将详细探讨这一技术涉及的知识点。 1. **响应式设计**：在当前多设备...
在JavaScript中，实现鼠标滚轮事件来控制滚动条上下滚动是一项常见的需求，特别是在网页交互设计中。这个功能可以通过监听浏览器的特定事件并处理这些事件来完成。以下将详细讲解如何利用JavaScript实现这一功能。 ...
JavaScript图片查看器是一种利用JavaScript编程语言实现的网页图像浏览工具，它赋予用户在网页上对图片进行多种操作的能力，如旋转、缩放和翻转等。这种技术通常用于提高用户体验，使得用户在查看图片时能够有更丰富...
在编程领域，尤其是在GUI（图形用户界面）设计中，为大图片添加滚动条是一个常见的需求。易语言，作为中国本土开发的一种简单易学的编程语言，提供了丰富的库和功能来帮助开发者实现这样的功能。本篇将详细介绍如何...
综上所述，通过JavaScript结合鼠标滚轮和组合键实现页面缩放，涉及到事件监听、CSS3的`transform`属性、缩放范围控制以及可能的兼容性处理等多个知识点。实际应用中，还可以根据需求添加平滑滚动、动画效果等增强...
改windows的鼠标滑轮滚动方向的指处理程序 标准滚动.bat 下载执行就可以更改，免去手动改注册表的麻烦
【标题】"js图片左右滚动条切换.zip"所包含的知识点主要是关于JavaScript（JS）实现的图片滚动条交互效果，这种效果通常用于图片相册或展示类网站，以提供用户友好的图片浏览体验。在现代网页设计中，动态且可自定义...
本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法，其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先，我们应当理解onmousewheel事件。这是一个鼠标...
当你想要实现图像随鼠标滚轮缩放和拖动的功能时，可以利用.NET Framework提供的事件处理机制。以下是对这一知识点的详细说明： 1. **鼠标滚轮缩放** - **MouseWheel事件**：当用户滚动鼠标滚轮时，PictureBox会...
本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考，具体如下： 以下代码实现判断页面的滚动条的滚动方向； var sign = 80;//定义默认的向上滚与向下滚的边界 [removed] = [removed] = ...
"JS自定义图片滚动条"就是这样一个技术点，它利用JavaScript语言来实现对滚动条外观和行为的个性化定制。下面我们将详细探讨这个主题，包括如何使用JavaScript和CSS来实现这一功能，以及可能遇到的关键问题和解决...
标题中的“Discuz鼠标滚轮缩放控件”是指在Discuz论坛系统中，通过鼠标滚轮实现图片的缩放功能。Discuz是一款开源的PHP社区论坛软件，它允许用户自定义各种交互行为，包括对图片的操作。在这个特定的场景下，用户...
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开...