图片放大缩小效果
效果在附件里,麻烦下载来看吧
<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等。这些软件不仅能够打开并显示图片,...
这个图片查看器不仅能够显示图片,还支持通过鼠标拖动进行平移以及使用鼠标滚轮进行缩放。我们将涵盖以下几个关键知识点: 1. **WPF基础知识**:WPF是.NET Framework的一部分,用于构建桌面应用程序。它提供了丰富...
本文将深入探讨如何使用 jQuery 和一个特定的插件 `jquery.mousewheel.min.js` 来实现通过鼠标滚轮控制图片的放大和缩小功能。 首先,我们需要了解 `jquery.mousewheel.min.js` 插件的作用。这个插件扩展了 jQuery...
这个组件将支持图片的放大、缩小以及通过鼠标滚轮进行逐级缩放的功能。首先,我们需要理解Delphi的基础知识,它是基于Object Pascal的集成开发环境,提供了丰富的控件和库来构建桌面应用程序。 ### 1. Delphi控件...
在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中的...