图片放大缩小效果
效果在附件里，麻烦下载来看吧
<html>
<head>
<title>Simple jsp page</title>
<link type="text/css" href="js/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var img=$("img");
img.draggable()
var slider = $( "<div id='slider'></div>" ).insertBefore( "#big" ).slider({
min: img.height(),
max: 800,
range: "min",
value: 1,
slide: function( event, ui ) {
// alert(ui.value)
resizeImg("img",ui.value)
//select[ 0 ].selectedIndex = ui.value - 1;
},
change:function(event, ui){
resizeImg("img",ui.value)
}
});
$('#big').bind('mousewheel', function(event, delta){
var i=img.height();
if(delta>0){
//alert(i)
i=i+10;
slider.slider( "value", i );
}else{
i=i-10;
slider.slider( "value", i );
}
});
function resizeImg(node,value){
$(node).height(value);
}
})
</script>
</head>
<body>
<div id="big" style="height:500px;overflow: hidden;width: 500px">
<img src="tupian.jpg" style="cursor: move"/>
</div>
</body>
</html>
分享到：
相关推荐
要实现“滚动鼠标滑轮放大缩小图片”的功能，通常需要一个支持这一特性的图像查看器软件，如Windows自带的“画图”程序，或者第三方软件如IrfanView、FastStone Image Viewer等。这些软件不仅能够打开并显示图片，...
这个组件将支持图片的放大、缩小以及通过鼠标滚轮进行逐级缩放的功能。首先，我们需要理解Delphi的基础知识，它是基于Object Pascal的集成开发环境，提供了丰富的控件和库来构建桌面应用程序。 ### 1. Delphi控件...
这个图片查看器不仅能够显示图片，还支持通过鼠标拖动进行平移以及使用鼠标滚轮进行缩放。我们将涵盖以下几个关键知识点： 1. **WPF基础知识**：WPF是.NET Framework的一部分，用于构建桌面应用程序。它提供了丰富...
本文将深入探讨如何使用 jQuery 和一个特定的插件 `jquery.mousewheel.min.js` 来实现通过鼠标滚轮控制图片的放大和缩小功能。 首先，我们需要了解 `jquery.mousewheel.min.js` 插件的作用。这个插件扩展了 jQuery...
在Windows Presentation Foundation（WPF）中，为应用程序添加鼠标滚轮和键盘按键的交互功能，以便实现视图的放大和...通过学习和理解这些代码，你应该能够熟练地在WPF应用中实现鼠标滚轮和键盘按键的放大缩小功能。
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开...
要实现"以鼠标为中心放大缩小控件"的功能，我们需要以下步骤： 1. **创建MatrixTransform对象**：在XAML中为控件定义一个MatrixTransform，并将其设置为Transform属性，如`...
例如，使用SetWindowExtEx和SetViewportExtEx函数可以设置视口和窗口的扩展，从而实现放大或缩小效果。窗口扩展决定了逻辑单位到设备单位的转换比例，而视口扩展则设置了设备上下文的可见区域。 为了保持视图的中心...
2. `handleScroll()`: 处理滚动事件，根据滚动条的位置改变图片的大小或位置，实现滚动放大缩小的效果。 3. `handleDrag()`: 处理拖动事件，让用户能够通过拖动图片查看不同区域。 4. `handleZoom()`: 处理滚轮事件...
在Unity3D游戏引擎中，实现物体通过鼠标滚轮放大缩小是一种常见的交互方式，尤其在第一人称视角或策略类游戏中。这篇博客分享了一个简单的Unity3D脚本，用于实现这个功能。首先，我们来详细了解这个脚本的工作原理...
1、开发环境： 基于 VS2019 基于C#语言 ...C# 鼠标滑轮控制picturebox以图像的中心点放大缩小 3、源代码解析地址为： https://blog.csdn.net/hgaohr1021/article/details/129091827?spm=1001.2014.3001.5502
**鼠标滑轮滚动事件详解** 在计算机用户界面中，鼠标滑轮滚动事件是与用户交互密切相关的一个重要元素，尤其在浏览网页、查看文档或者使用各种应用程序时，它提供了方便快捷的浏览方式。本文将深入探讨鼠标滑轮滚动...
在这个场景中，我们讨论的是如何实现一个功能丰富的PictureBox控件，它允许用户通过单击按钮、滑轮滚动来放大和缩小图片，并且能够在PictureBox内拖动图片。这个功能在图像查看器或者编辑器应用中非常常见。以下是...
本文将深入探讨一款名为“头像截取插件”的工具，它融合了拖动、鼠标滑轮缩放以及图像样式更改等多种功能，为用户提供了一种便捷而灵活的头像处理方式。这款插件基于JavaScript库JQuery，充分利用了其强大的事件处理...
"通过鼠标滚动来放大或缩小图片"是一个常见的需求，特别是在地图应用、图片查看器或者任何需要详细查看图像的场景。这个功能使得用户无需点击特定按钮，只需滚动鼠标滚轮就能轻松地改变图片的显示大小，从而提高浏览...
"图片弹窗发大查看，鼠标滑轮放大，拖拽，旋转"这一功能涉及到了几个关键的技术点，这些技术使得用户能更直观、便捷地与图像进行互动。以下是对这些知识点的详细说明： 1. **图片弹窗**：图片弹窗是一种常见的UI...
在JavaScript（JS）中，实现图片的滑轮滚动放大预览、拖动和旋转功能是一项常见的交互设计任务，尤其在网页开发中应用广泛。这项功能可以让用户更直观、更自由地查看图片细节，提高用户体验。以下将详细讲解如何实现...
在Java编程领域，实现鼠标的滚轮放大缩小、鼠标左键隐藏显示以及方向键移动功能是常见的交互式应用需求。这些功能广泛应用于各种图形用户界面（GUI）应用程序，如图像查看器、地图导航软件等。下面我们将详细探讨...
本项目利用Qt 5.3.2版本实现了这一功能，支持通过滚轮和按键进行图片的放大与缩小，同时具备复位和切换图片的能力。以下将详细解释实现这些功能的关键知识点。 1. **QGraphicsView和QGraphicsScene**：Qt中的...