移动鼠标实现图片的缩放

最新推荐文章于 2022-10-22 20:36:26 发布
最新推荐文章于 2022-10-22 20:36:26 发布
阅读量904 收藏
点赞数
分类专栏： AJAX 文章标签： image html float class div url

效果图：

代码：

<!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>&nbsp;</P>
</DIV></BODY></HTML>

 
rigger21
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
12个Javascript图片相册画廊网
--
12-29 1024
<br />现在有大量的基于Flash的画廊展示程序，但很多时候，Flash能够创造更精美的效果，却不是那么方便用户，尤其是速度问题还有待解决。所以我们还是钟爱着javascript和CSS 。这里是综合了一些较好的JavaScript和ajax技术为基础的图片画廊程序解决方案，当然，它们中的一些不单是可以用来展示图片，还可以展示视频，html文档或是其它格式的多媒体内容。(via 12 javascript images gallries)<br />(E)2 Photo Gallery Made Wit
实现图片跟随鼠标移动
qq_43023116的博客
02-21 5422
下面代码可以实现图片跟随鼠标移动 &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; img { position: absolute; width: 100px; }
Hoverbox Image Gallery
07-04
wa-aj-frontend-completeSamples.zip wa-aj-frontend-completeSamples.zip wa-aj-frontend-completeSamples.zip wa-aj-frontend-completeSamples.zip wa-aj-frontend-completeSamples.zip wa-aj-frontend-completeSamples.zip
web前端--制作图像画廊，鼠标经过小图时显示大图
Hey3399的博客
10-22 2035
web前端开发，使用HTML文件制作图像画廊，用css文件规定样式，实现当鼠标经过小图时显示大图。
打造可靠的 Ajax 应用程序，第 2 部分: 构建 Ajax 后端
码农之道
02-17 679
2008 年 5 月 14 日 后端处理 — 服务器端脚本和程序 — 并不总能一投入到 Ajax应用程序中就很好地运转。相反，若能仔细地提前规划以确保数据以恰当及有效的格式发送，反而能让整个应用程序更内聚，并能减少不必要的复杂性。在本文中，Brett McLaughlin 展示了一个好的服务器端脚本如何能补足 Ajax 行为。 在本系列的 第 1 部分，我们在 Nathan Smith 的 H
鼠标对图片的操作（缩放、拖动）
fk129
07-27 2523
//鼠标滚轮缩放 function bbimg(o){ $(o).css({'width':'auto','height':'auto','max-width':'auto','max-height':'auto'}) $('.fancybox-inner').css('overflow','hidden') var zoom=parseInt(o.style.zoom, ...
图片跟随鼠标移动
qq_45911604的博客
03-17 71
图片跟随鼠标移动 说明：小编在这里用一个小黑圆代替图片。 效果展示： 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
利用鼠标实现图片移动和缩放
09-10
在大多数图形应用程序中，用户可以通过按下鼠标左键并移动鼠标来移动图片。这个过程涉及到窗口坐标系统和图像坐标系统的转换。当鼠标被按下时，记录下鼠标位置和图片的当前位置，然后在鼠标移动期间更新图片的位置，...
VS+QT实现图片缩放移动
08-28
2. **事件处理**：为了实现图片的缩放和移动，我们需要捕获和处理鼠标事件，如鼠标按下、移动和释放。这些事件可以让我们跟踪用户的操作，进而计算出缩放比例和移动的距离。 3. **QGraphicsView与QGraphicsScene**...
QT下实现图片的自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、以及重置并截图保存
12-22
在QT框架下，开发图像处理应用时，我们经常会遇到图片的自适应显示、缩放、移动和截图等需求。本文将详细介绍如何实现这些功能，并提供一个名为`EditPic`的示例项目，帮助你理解其背后的原理和实现方法。 首先，...
jquery 控制鼠标滑轮 放大缩小图片
02-25
jquery.mousewheel.min.rar
hoverbox 图片放大JS
10-17
鼠标移上，放大图片的JS hoverbox.rar
HoverBox:干净现代的工具提示
05-14
悬停框 干净现代的工具提示 用法 在<head>包括以下几行： < link rel =" stylesheet " type =" text/css " href =" HoverBox.css " /> < script type =" text/javascript " src =" HoverBox.js " defer > </ script > 要指示元素可以显示HoverBox，请将HBHasHoverBox类HBHasHoverBox到该元素。 可以通过设置HBTitle属性的值来设置HoverBox的标题。 有两个选项可用于设置HoverBox的内容。 设置HBBody属性的值 将HBBodyElem属性的值设置为模板元素的ID（包括# ） 如果使用第二个选项，则可以将类HBTemplate添加到模板中 例子： < div class =" HBHasHoverBo
jquery 鼠标滚轮实现图片缩放
03-29
在网页开发中，jQuery...可缩放图片"> ``` 这里，`id="zoom-image"`是为了方便我们在jQuery中选中这个元素进行操作。 接下来，我们需要引入jQuery库，如果你的项目还没有包含它，可以在头部添加以下代码： ```html ...
易语言图片快速缩放移动
08-21
易语言图片快速缩放移动源码系统结构:设置矩形,移动窗口, ======窗口程序集1 || ||------__启动窗口_创建完毕 || ||------设置矩形 || ||------__启动窗口_鼠标左键被按下 || ||------__启动窗口_鼠
鼠标移入，图片放大缩小的方法css方式
FREE-FLY的博客
02-06 3068
1、scale(x,y) 对元素进行缩放，X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。 transform:scale(2,2.5);   2、scaleX() 元素只在X轴（水平方向）缩放元素。 默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点
图片使用鼠标移动和滚轮缩放js以及插件
知世故而不世故
02-07 4568
CSS页面（img标签必须含有此id） img id="imageFullScreen" src="" alt=""> JavaScript代码： $(document).ready(function() {//图片移动放大 需配合上面的js才生效 $('#imageFullScreen').smartZoom({ 'containerClass': 'zoo
html 鼠标移动到图片时，对图片进行缩放
weixin_42079053的博客
07-04 3642
之前在研究如何在鼠标放置于图片上时，对图片进行缩放，鼠标离开后恢复图片大小。 一开始用的是修改图片的width和height值，我用bootstrap的栅栏放置的图片，结果出现了排版错误，效果很不理想。 于是想用边框属性来进行放置鼠标的互动，无意间发现，增加边框时图片会进行缩放！ 边框设置为10px时 边框设置为50px时。 那么，只要我把边框设置成白色（或者背景的颜色），...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
热门推荐
李海江的博客
12-14 4万+
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：
canvas 鼠标缩放和移动图片
最新发布
06-11
要实现canvas鼠标缩放和移动图片，可以通过以下步骤： 1.创建canvas元素，并在其中绘制需要展示的图片； 2.为canvas元素添加鼠标滚动事件，根据滚动方向进行缩放操作，可以通过设置canvas的缩放比例实现； 3.为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值