<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>
效果图：
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0047)http://solardreamstudios.com/_img/learn/css/pg/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Modified Hoverbox Image Gallery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content=noindex,nofollow name=robots>
<STYLE type=text/css>* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: #fff; PADDING-BOTTOM: 30px; MARGIN: 0px; COLOR: #666; PADDING-TOP: 30px; TEXT-ALIGN: center
}
H1 {
FONT: bold 16px Arial, Helvetica, sans-serif
}
P {
MARGIN: 15px 0px; FONT: 11px Arial, Helvetica, sans-serif
}
A {
FONT-WEIGHT: bold; COLOR: #900; TEXT-DECORATION: none
}
A:hover {
BACKGROUND: #900; COLOR: #fff
}
HR {
CLEAR: both; MARGIN: 24px 0px; _margin: 0
}
#page-container {
MARGIN: 0px auto; WIDTH: 350px; TEXT-ALIGN: left
}
.pg {
LIST-STYLE-IMAGE: none; WIDTH: 350px; LIST-STYLE-TYPE: none
}
.pg:unknown {
CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "."
}
.pg LI {
DISPLAY: inline; LIST-STYLE-IMAGE: none; LIST-STYLE-TYPE: none
}
.pg LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 4px; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 100px; PADDING-TOP: 4px; BORDER-BOTTOM: #ccc 1px solid; POSITION: relative; HEIGHT: 75px
}
.pg LI A:hover {
FONT-SIZE: 100%; Z-INDEX: 2
}
.pg LI A IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 100px; BORDER-BOTTOM: 0px; POSITION: absolute; HEIGHT: 75px
}
.pg LI A:hover IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
.pg LI A:active IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
.pg LI A:focus IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
</STYLE>
<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY>
<DIV id=page-container>
<H1>鼠标移动事件</H1>
<P>将你的鼠标移动到图片上，你就能看见大的图片。。。。 </P>
<HR>
<UL class=pg>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
</LI></UL>
<HR>
<P> </P>
</DIV></BODY></HTML>
分享到：
相关推荐
C# 通过鼠标实现放大图片和移动图片，内附有源码和exe,实现鼠标滚轮放大和图片平移
利用鼠标拖动图片，利用鼠标滚轮实现图片缩放。
通过重载QLabel函数，实现图片的缩放和移动（通过右键菜单启用功能）在图片上打矩形掩码，并处理原图数据流（打掩码时不能移动或缩放图片），还带一个裁剪框；
可自适应显示图片，以鼠标位置为中心进行缩放，按住鼠标左键进行图片拖动，可添加截图方框并截图保存，可载入显示大部分tif格式的图，可显示伪彩，灰度图
通过鼠标缩放移动图片,实现图片的缩放移动
halcon与C#联合编程之鼠标控制图片缩放，拖动，roi,C#源代码及详细注释
vb 用picturebox实现图片放大缩小鼠标拖放滚轮缩放 这个测试程序满足基本要求,如有更高的要求可61303072qq联系本人 （滚轮是需要按住ctrl键然后按鼠标滚轮就可以了。可以在代码里屏蔽ctrl键的判断）
通过自定义控件封装picturebox，实现点击图片拖动，鼠标滚轮缩放等功能。
单独放大缩小图片和移动图片的很多，很难找到能缩放和移动一起实现的例子。由于项目的需要就自己写了个java实现图片放大（以视图中心放大）、缩小、移动、鼠标拖移。
Qt实现图像的读取、鼠标位置缩放图像、移动图像
wpf通过鼠标滚轮控制图片缩放 通过鼠标来移动图片，也可以通过按钮来还原、放大、缩小、翻转图片，还有透明菜单栏，很有参考意义
discuz鼠标滚轮缩放，鼠标拖动移动，非常方便使用 内置demo
C#PictureBox实现图片拖动和缩放，利用鼠标事件实现 VS2015 .net Framwork4.5.2
Halcon-MFC-联合编程之用鼠标缩放图像、拖动图像 内附完整的lib 头文件 DLL文件，编译后即可运行，也有已经编译好的exe运行程序可供测试。
OpenGL实现鼠标旋转缩放平移操作：VS2015+OpenGL；加载OFF文件，实现鼠标旋转缩放平移操作，添加2个光源。
学习Halcon很看了新手必备，根据网上的资料整理学习，希望给正在学习的兄弟们，小走点弯路：功能如下：Hwindow 滚轮缩放 左键实现图片平移，右键适合大小，
利用QPixmap实现图片缩放、平移等操作，可参考文章：https://blog.csdn.net/didi_ya/article/details/122435573
C#联合halcon，使用halcon控件实现通过鼠标放大缩小图片，拖拽图片。
通过鼠标滚轮或者slider控件缩放图片，可以拖动图片到指定位置
类似Windows图片查看器，实现图像的缩放，滑动鼠标中间的滚轮，可以实现图像的逐级缩放。类似Windows图片查看器，实现图像的缩放，滑动鼠标中间的滚轮，可以实现图像的逐级缩放。