JQuery支持图片放大、缩小:
一、JQuery支持图片放大、缩小:
今天在"懒人之家"看到JQuery支持图片放大和缩小这个效果，顿时觉得非常神奇，就学习一下的.
二、下载源码，开始学习:
三、开始编码:
1.是对基本格式书写:
<html> <head> <title>JQuery，图片放大缩小</title> </head> <body> </body> </html>
2.在body里面填充内容及样式:
<body>
<div id="pageContent">
<div id="imgContainer">
<img id="imageFullScreen" src="images/zoomFullScreen.jpg"/>
</div>
<div id="positionButtonDiv">
<p>
<span>
<img id="zoomInButton" class="zoomButton" src="images/zoomIn.png" title="zoom in" alt="zoom in"/>
<img id="zoomOutButton" class="zoomButton" src="images/zoomOut.png" title="zoom out" alt="zoom out"/>
</span>
</p>
<p>
<span class="positionButtonSpan">
<map name="positionMap" class="positionMapClass">
<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
<area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
</map>
<img src="images/position.png" usemap="#positionMap"/>
</span>
</p>
</div>
</div>
</body>
样式:
<style>
*{
margin:0;
padding:0;
}
body{
background:#333;
}
#pageContent{
width:980px;
height:500px;
overflow:hidden;
position:relative;
margin:50px auto;
}
#imgContainer{
width:980px;
height:500px;
}
#positionButtonDiv{
background:rgba(58,56,63,0.8);
border:solid 1px #100000;
color:#fff;
padding:8px;
text-align:left;
position:absolute;
right:35px;
top:35px;
}
#positionButtonDiv.positionButtonSpan img{
float:right;
border:0;
}
.positionMapClass area{
cursor:pointer;
}
.zoomButton{
border:0;
cursor:pointer;
}
.zoomableContainer{
background-image: url("images/transparent.png");
}
</style>
3.书写JQuery:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/e-smart-zoom-jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
$('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click",moveButtonClickHandler);
$('#zoomInButton,#zoomOutButton').bind("click",zoomButtonClickHandler);
function zoomButtonClickHandler(e){
var scaleToAdd=0.8;
if(e.target.id == 'zoomOutButton')
scaleToAdd=-scaleToAdd;
$('#imageFullScreen').smartZoom('zoom',scaleToAdd);
}
function moveButtonClickHandler(e){
var pixIsToMoveOnX=0;
var pixIsToMoveOnY=0;
switch(e.target.id){
case "leftPositionMap":
pixIsToMoveOnX=50;
break;
case "rightPositionMap":
pixIsToMoveOnX=-50;
break;
case "topPositionMap":
pixIsToMoveOnY=50;
break;
case "bottomPositionMap":
pixIsToMoveOnY=-50;
break;
}
$('#imageFullScreen').smartZoom('pan',pixIsToMoveOnX,pixIsToMoveOnY);
}
});
</script>
四、运行效果:
五、解释:
body里面的:
<span> :在CSS定义中属于一个行内元素,在行内定义一个区域，
也就是一行内可以被 <span> 划分成好几个区域，从而实现某种
特定效果。 <span> 本身没有任何属性.
<map>:定义一个客户端图像映射。图像映射（image-map）指带
有可点击区域的一幅图像
script里面的:
smartZoom()和bind()应该是e-smart-zoom-jquery.min.js里面
的方法。然后下面这两句没看懂:
1.$('#imageFullScreen').smartZoom({'containerClass':
'zoomableContainer'});
2.$('#imageFullScreen').smartZoom('pan',pixIsToMoveOnX,
pixIsToMoveOnY);
还有:
刚开始就是没引入<script src="js/e-smart-zoom-jquery.min.js"></script>这一句，反复修改了好多次，最后突然明白了，那个实现放
大和缩小的方法在e-smart-zoom-jquery.min.js这个库中，不引入是
实现不了的。
六、完整代码:
见附件
相关推荐
在本文中，我们将深入探讨如何使用JavaScript库JQuery实现图片的放大缩小和拖动功能。JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发更加高效。在这个项目中，"magnify-...
综上所述，"jquery图片放大缩小"项目涵盖了jQuery基本操作、事件处理、CSS3动画和布局策略等多个方面的知识。通过实践和学习这些技术，可以提升网页交互的用户体验，并为更复杂的网页动态效果打下基础。
"JQuery点击放大缩小图片并可左右滑动"这个功能就是一个典型的例子，它使得用户可以更方便地查看和浏览网页中的图片，同时也增加了页面的互动性和视觉吸引力。 JQuery是一个广泛使用的JavaScript库，它简化了DOM...
"jQuery双击图片放大缩小效果"是一种创新的交互设计，能够提升用户浏览图片时的视觉体验。这个特效通过使用JavaScript库jQuery实现，允许用户双击图片后，图片会独立出来显示，并且其他页面元素变暗，创造出一种聚焦...
本资源“jQuery图片放大缩小旋转代码.zip”提供了一个实用的图片查看插件，它允许用户在弹出窗口中查看图片，并具备一系列增强用户体验的功能，如放大、缩小、旋转以及上一张下一张切换。 首先，我们来看这个插件的...
【jQuery 点击图片放大缩小】是一个常见的网页交互功能，常用于提高用户体验，尤其是在展示细节丰富的图片时。jQuery 是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，使得...
至此，一个简单的jQuery图片放大缩小功能已经实现。用户点击图片时，图片会放大；再次点击，图片会恢复原大小。这个功能对于展示细节丰富的图片特别有用，如产品图片、艺术作品等。 注意：在实际项目中，可能需要...
本项目"jquery图片放大缩小旋转代码"提供了利用jQuery实现图片的动态操作，如放大、缩小和旋转的功能。下面将详细解释这个功能的实现原理和步骤。 1. **HTML 结构**： 首先，我们需要在 HTML 页面中创建一个图片...
zoomify.js是一款非常实用的jQuery图片放大预览Lightbox插件。zoomify.js可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户的体验度。
总的来说，"jQuery局部图片放大缩小效果"是一个结合了jQuery、CSS和HTML技术的实用功能，它提升了用户体验，使得查看图片的细节变得更加便捷。通过理解和运用这些技术，开发者能够创建出更多富有互动性的网页应用。
在图片的放大缩小和拖动功能中，`mousedown`和`mouseup`事件用于开始和结束缩放，`mousemove`事件则用于在拖动或缩放过程中更新图片的位置和大小。 4. 图片放大缩小： 图片放大缩小通常涉及到CSS的`transform`属性...
js特效-jQuery H5弹出图片放大缩小旋转插件
那么你可以将鼠标悬停在图片上，滚动鼠标滚轮即可实现图片的放大或者缩小效果 使用方法： 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可
jQuery iViewer是一款基于JavaScript库jQuery的图片查看工具，它提供了丰富的功能，包括图片的放大、缩小、旋转以及拖拽等操作，极大地提升了用户在网页上的图片浏览体验。这款插件设计简洁，易于集成到任何Web项目...
本教程将详细介绍如何利用jQuery实现一个图片的放大缩小功能，以及在鼠标悬停时显示文字说明的效果。 首先，我们需要在页面中引入jQuery库。如果你的项目还没有引入，可以通过CDN链接添加，例如： ```html ...
jQuery的`.hover()`函数可以帮助我们监听鼠标进入和离开事件，结合CSS3的过渡效果，实现平滑放大缩小。 **5. 图片左右滚动** 图片左右滚动是通过用户点击左右箭头或自动滚动来实现图片的水平移动。jQuery的`....
在移动设备上，由于屏幕尺寸有限，用户可能会遇到查看小图像的...以上就是使用jQuery在手机网页上手动控制图片放大缩小的详细步骤和相关知识点。通过这样的功能，用户可以更方便地查看网页中的小图片，提升浏览体验。
`jQuery`是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得在手机端实现图片的放大、缩小和翻转功能变得相对简单。在这个名为"jQuery适用于手机端图片放大缩小翻转代码"的压缩包中，包含了实现...