`
465272694
  • 浏览: 52350 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

图片放大缩小效果,支持鼠标滑轮

阅读更多

图片放大缩小效果

效果在附件里,麻烦下载来看吧

<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>
 
  • web.rar (131.3 KB)
  • 下载次数: 173
分享到:
评论

相关推荐

    滚动鼠标滑轮放大缩小图片

    要实现“滚动鼠标滑轮放大缩小图片”的功能,通常需要一个支持这一特性的图像查看器软件,如Windows自带的“画图”程序,或者第三方软件如IrfanView、FastStone Image Viewer等。这些软件不仅能够打开并显示图片,...

    使用C# WPF实现图片查看器,支持鼠标拖动和滑轮控制放大缩小

    这个图片查看器不仅能够显示图片,还支持通过鼠标拖动进行平移以及使用鼠标滚轮进行缩放。我们将涵盖以下几个关键知识点: 1. **WPF基础知识**:WPF是.NET Framework的一部分,用于构建桌面应用程序。它提供了丰富...

    jquery 控制鼠标滑轮 放大缩小图片

    本文将深入探讨如何使用 jQuery 和一个特定的插件 `jquery.mousewheel.min.js` 来实现通过鼠标滚轮控制图片的放大和缩小功能。 首先,我们需要了解 `jquery.mousewheel.min.js` 插件的作用。这个插件扩展了 jQuery...

    Delphi 图片漫游框放大缩小及滚轮缩放

    这个组件将支持图片的放大、缩小以及通过鼠标滚轮进行逐级缩放的功能。首先,我们需要理解Delphi的基础知识,它是基于Object Pascal的集成开发环境,提供了丰富的控件和库来构建桌面应用程序。 ### 1. Delphi控件...

    wpf实现鼠标滚轮放大缩小,键盘上下键放大缩小

    在Windows Presentation Foundation(WPF)中,为应用程序添加鼠标滚轮和键盘按键的交互功能,以便实现视图的放大和...通过学习和理解这些代码,你应该能够熟练地在WPF应用中实现鼠标滚轮和键盘按键的放大缩小功能。

    js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小js资源

    js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...

    wpf 转动滚轮以鼠标为中心放大缩小控件

    要实现"以鼠标为中心放大缩小控件"的功能,我们需要以下步骤: 1. **创建MatrixTransform对象**:在XAML中为控件定义一个MatrixTransform,并将其设置为Transform属性,如`...

    滑轮控制视图放大与缩小

    例如,使用SetWindowExtEx和SetViewportExtEx函数可以设置视口和窗口的扩展,从而实现放大或缩小效果。窗口扩展决定了逻辑单位到设备单位的转换比例,而视口扩展则设置了设备上下文的可见区域。 为了保持视图的中心...

    javascript图片预览(滚动放大缩小和拖动查看)

    2. `handleScroll()`: 处理滚动事件,根据滚动条的位置改变图片的大小或位置,实现滚动放大缩小的效果。 3. `handleDrag()`: 处理拖动事件,让用户能够通过拖动图片查看不同区域。 4. `handleZoom()`: 处理滚轮事件...

    鼠标滑轮将物体放大缩小1

    在Unity3D游戏引擎中,实现物体通过鼠标滚轮放大缩小是一种常见的交互方式,尤其在第一人称视角或策略类游戏中。这篇博客分享了一个简单的Unity3D脚本,用于实现这个功能。首先,我们来详细了解这个脚本的工作原理...

    C# 鼠标滑轮控制picturebox以图像的中心点放大缩小

    1、开发环境: 基于 VS2019 基于C#语言 ...C# 鼠标滑轮控制picturebox以图像的中心点放大缩小 3、源代码解析地址为: https://blog.csdn.net/hgaohr1021/article/details/129091827?spm=1001.2014.3001.5502

    鼠标滑轮滚动事件

    **鼠标滑轮滚动事件详解** 在计算机用户界面中,鼠标滑轮滚动事件是与用户交互密切相关的一个重要元素,尤其在浏览网页、查看文档或者使用各种应用程序时,它提供了方便快捷的浏览方式。本文将深入探讨鼠标滑轮滚动...

    c#单击按钮、滑轮滚动放大、缩小pictruebox中的图片,并且pictruebox里的图片可以拖动

    在这个场景中,我们讨论的是如何实现一个功能丰富的PictureBox控件,它允许用户通过单击按钮、滑轮滚动来放大和缩小图片,并且能够在PictureBox内拖动图片。这个功能在图像查看器或者编辑器应用中非常常见。以下是...

    头像截取插件(拖动丶鼠标滑轮丶放大缩小更改图片样式).zip

    本文将深入探讨一款名为“头像截取插件”的工具,它融合了拖动、鼠标滑轮缩放以及图像样式更改等多种功能,为用户提供了一种便捷而灵活的头像处理方式。这款插件基于JavaScript库JQuery,充分利用了其强大的事件处理...

    通过鼠标滚动来放大或缩小图片

    "通过鼠标滚动来放大或缩小图片"是一个常见的需求,特别是在地图应用、图片查看器或者任何需要详细查看图像的场景。这个功能使得用户无需点击特定按钮,只需滚动鼠标滚轮就能轻松地改变图片的显示大小,从而提高浏览...

    图片弹窗发大查看,鼠标滑轮放大,拖拽,旋转

    "图片弹窗发大查看,鼠标滑轮放大,拖拽,旋转"这一功能涉及到了几个关键的技术点,这些技术使得用户能更直观、便捷地与图像进行互动。以下是对这些知识点的详细说明: 1. **图片弹窗**:图片弹窗是一种常见的UI...

    js实现图片的滑轮滚动放大预览、拖动、旋转

    在JavaScript(JS)中,实现图片的滑轮滚动放大预览、拖动和旋转功能是一项常见的交互设计任务,尤其在网页开发中应用广泛。这项功能可以让用户更直观、更自由地查看图片细节,提高用户体验。以下将详细讲解如何实现...

    鼠标滚轮放大缩小,鼠标左键隐藏显示,方向键移动.rar(java程序)

    在Java编程领域,实现鼠标的滚轮放大缩小、鼠标左键隐藏显示以及方向键移动功能是常见的交互式应用需求。这些功能广泛应用于各种图形用户界面(GUI)应用程序,如图像查看器、地图导航软件等。下面我们将详细探讨...

    Qt 图片缩放,支持滚轮和按键缩放

    本项目利用Qt 5.3.2版本实现了这一功能,支持通过滚轮和按键进行图片的放大与缩小,同时具备复位和切换图片的能力。以下将详细解释实现这些功能的关键知识点。 1. **QGraphicsView和QGraphicsScene**:Qt中的...

Global site tag (gtag.js) - Google Analytics