鼠标移动到图片上实现图片的放大缩小

最新推荐文章于 2023-03-13 14:26:40 发布
最新推荐文章于 2023-03-13 14:26:40 发布
阅读量7.4k 收藏 1
点赞数 2
分类专栏： ASP.NET技术 .net笔记 文章标签： asp.net asp string server image xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ngy00988/article/details/7296756
版权
摘要由CSDN通过智能技术生成 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="图片放大缩小.aspx.cs" Inherits="ASP.NET高级.图片放大缩小" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
            InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" 
            SelectMethod="GetData" 
            TypeName="ASP.N
最低0.47元/天 解锁文章
Yawn
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现鼠标移动到图片上边框放大缩小效果
06-11
"jQuery实现鼠标移动到图片上边框放大缩小效果"是一种常见的交互式图片展示技术，它能够增强用户的视觉体验，提高网站的吸引力。这种效果通常是通过JavaScript库jQuery来实现的，因为jQuery提供了一系列简便的API，...
简单的鼠标移动到图片自动放大及缩小
无法预知未来
09-10 2744
放大及缩小       img{   position:relative;   -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);   -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);   box-shadow: 2px 2px 4px rgba(0,0,0,0.3);   -webkit
鼠标滚轮实现图片的缩放-------Day79
麦田里
07-31 2516
虽然还没想起实际应用中哪里用的到，但是效果还是蛮喜欢的
鼠标经过图片 图片放大缩小
qq_39098505的博客
03-22 1683
div img{ transition: all 0.5s; cursor: pointer; position:relative } div img:hover{ transform: scale(1.2); z-index:999 }
鼠标放到图片上图片就变大
bigorange1的博客
03-13 3946
鼠标放到图片上，图片放大，有一定的延伸效果
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
热门推荐
weixin_46022934的博客
12-20 1万+
背景与效果图 1.背景如下（功能图）： 2.效果图如下： 拖拽后的效果 缩放的效果 放大的效果 一、功能：支持鼠标长按拖拽 1.鼠标事件： 2.拖拽功能流程 3.拖拽部分代码如下 二、功能：滚轮控制图片放大缩小 1.鼠标事件(推荐使用onwheel；mousewheel存在安全隐患) 2.功能流程： 3.具体代码如下： 三、案例功能的完整代码如下： 四、总结(一定要看，功能是有坑的)
js实现图片放大并跟随鼠标移动特效
10-17
总的来说，实现图片跟随鼠标移动并放大的JavaScript特效涉及到JavaScript事件处理、DOM操作以及CSS样式控制。这个特效的实现既提高了用户的交互体验，又展示了JavaScript在网页动态效果方面的强大能力。在实际项目中...
WPF实现图片放大，缩小，拖动示例
07-20
为了提供更好的交互体验，你还可以添加一些额外的功能，比如添加滑动手势来平移图片，添加双击事件来切换放大缩小状态，或者添加滚轮事件来改变放大倍数。这些功能的实现都需要结合WPF的事件系统和转换类来完成。 ...
QtQGraphicsView实现图片放大、缩小、鼠标拖动、以鼠标点放大缩小
05-30
5.保证无毒 1.简单,方便,实用 3.实例可以自行改用 1.如有非法,本人无法律责任！ 8.更多作品,查找标签“朱建强”7.... 4.如需联系我请看左边数字！1.如不知代表何物，那就放弃计算机吧！ 0....CSDN老板不让我上传联系方式。
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
12-10
原始状态： 鼠标经过： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”...
Delphi 图片漫游框放大缩小及滚轮缩放
09-08
类似Windows图片查看器，实现图像的缩放，滑动鼠标中间的滚轮，可以实现图像的逐级缩放。类似Windows图片查看器，实现图像的缩放，滑动鼠标中间的滚轮，可以实现图像的逐级缩放。
仿照淘宝，鼠标移入显示大图
12-25
仿照淘宝，鼠标移入显示大图 可以多个图片，可定制左右显示放大图
html鼠标悬停图片自动缩小,使用JS实现鼠标放上图片进行放大离开实现缩小功能...
weixin_33634341的博客
05-31 1287
使用JS实现鼠标放上图片进行放大离开实现缩小功能，具体代码如下所示：var img = document.getElementById('img')var s1,s2console.log(img)// 图片放大效果i = 100;img.addEventListener('mouseover',function(){clearInterval(s1);s1 = setInterval(funct...
vue3 + ts 实现商品放大镜效果
小妹的博客
06-14 382
vue3 + ts 实现商品放大镜效果
鼠标移到图片上图片放大-CSS3
初心 - 杨瑞超个人博客
09-25 3884
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416 在开发中，我们往往会遇到图片放大特效，今天给大家分享下用CSS3来实现鼠标移动到图片上放大，直接贴代码了。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;www.chao9...
html鼠标自动图片放大,css如何实现鼠标放在图片上时图片放大呢?
weixin_36146057的博客
06-09 6405
摘要:下文讲述css代码实现鼠标放在图片上时变大，离开时变小的处理方法分享，如下所示:实现思路:使用css缩放属性transform: scale(1.0,1.0) 既可实现图片变大变小，如下例所示:例:img{width:120px;height:30px;cursor:hand;/*默认样式鼠标移开后自动还原*/transform: scale(1.0,1.0);-ms-transform:s...
鼠标移动到图片上放大效果
weixin_34266504的博客
07-04 91
<!DOCTYPE html> <html> <head> </head> <body id="player"> <a class="thumbnail" href="#"> <img src="http://att.itzmx.com/data/attachmen...
vue3+ts实现图片放大镜效果
longfan_的博客
07-17 397
vue3+ts实现图片放大镜效果
java实现图片中心放大、缩小、移动、鼠标拖移
最新发布
06-12
要实现图片中心放大、缩小、移动、鼠标拖移，可以使用Java的图形库，例如Java AWT和Java Swing。 下面是一个简单的实现代码示例： ```java import java.awt.*; import java.awt.event.*; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; import javax.swing.*; public class ImageZoomPan extends JPanel implements MouseListener, MouseMotionListener, MouseWheelListener { private static final long serialVersionUID = 1L; private BufferedImage image; private double scale = 1; private double xOffset = 0; private double yOffset = 0; private Point lastDragPoint; public ImageZoomPan(BufferedImage image) { this.image = image; this.addMouseListener(this); this.addMouseMotionListener(this); this.addMouseWheelListener(this); } @Override public Dimension getPreferredSize() { return new Dimension((int) (image.getWidth() * scale), (int) (image.getHeight() * scale)); } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D) g.create(); g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); AffineTransform at = new AffineTransform(); at.translate(xOffset, yOffset); at.scale(scale, scale); g2d.drawRenderedImage(image, at); g2d.dispose(); } @Override public void mouseWheelMoved(MouseWheelEvent e) { int notches = e.getWheelRotation(); if (notches < 0) { scale *= 1.1; } else { scale /= 1.1; } revalidate(); repaint(); } @Override public void mouseClicked(MouseEvent e) { } @Override public void mousePressed(MouseEvent e) { lastDragPoint = e.getPoint(); } @Override public void mouseReleased(MouseEvent e) { lastDragPoint = null; } @Override public void mouseEntered(MouseEvent e) { } @Override public void mouseExited(MouseEvent e) { } @Override public void mouseDragged(MouseEvent e) { if (lastDragPoint != null) { double dx = e.getX() - lastDragPoint.getX(); double dy = e.getY() - lastDragPoint.getY(); lastDragPoint = e.getPoint(); xOffset += dx / scale; yOffset += dy / scale; repaint(); } } @Override public void mouseMoved(MouseEvent e) { } public static void main(String[] args) throws Exception { BufferedImage image = ImageIO.read(new File("image.jpg")); ImageZoomPan panel = new ImageZoomPan(image); JFrame frame = new JFrame("Image Zoom and Pan"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.add(panel); frame.pack(); frame.setLocationRelativeTo(null); frame.setVisible(true); } } ``` 在这个示例中，我们首先定义了一个 `ImageZoomPan` 类，这个类继承自 `JPanel`，并实现了 `MouseListener`、`MouseMotionListener` 和 `MouseWheelListener` 接口。这个类中定义了一个 `BufferedImage` 类型的 `image` 变量，以及一个 `scale` 变量用于缩放图片，以及 `xOffset` 和 `yOffset` 变量用于移动图片。 在 `paintComponent` 方法中，我们使用 `AffineTransform` 类来对图片进行缩放和平移操作，然后使用 `drawRenderedImage` 方法将图片绘制到面板上。 在 `mouseWheelMoved` 方法中，我们根据鼠标滚轮的滚动方向来调整 `scale` 变量的值，然后重新计算面板的大小，并重新绘制面板。 在 `mousePressed` 和 `mouseDragged` 方法中，我们记录鼠标的位置，并计算出鼠标在面板上移动的距离，然后根据缩放比例来调整 `xOffset` 和 `yOffset` 变量的值，然后重新绘制面板。 最后，我们在 `main` 方法中创建一个 `ImageZoomPan` 面板，并将其添加到一个 `JFrame` 窗口中。我们可以通过调用 `pack` 方法来自动调整窗口的大小，然后将窗口设置为可见状态。 当我们运行这个程序时，就可以看到一张图片在面板中心位置显示，并且可以使用鼠标滚轮来缩放图片，使用鼠标拖动来移动图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值