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这个库中，不引入是
实现不了的。
六、完整代码:
见附件
相关推荐
jquery图片放大缩小 鼠标经过 图片在div内部自动放大
jQuery图片放大缩小旋转代码是一款弹出窗口图片插件，支持图片放大缩小旋转拖动上一张下一张切换查看效果。
jQuery 点击图片放大缩小
基于JQuery的图片放大缩小功能，以及拖动等相关功能。
JQuery实现点击放大缩小图片并可左右滑动图片播放，一个比较酷炫的效果，适合美化页面等
应项目需求，需要实现图片放大缩小旋转，这里做个记录，方便以后查看，jquery图片放大缩小旋转代码，包括html，css，js，解压即可打开查看效果，方便快捷，
Jquery图片放大查看插件,根据图片大小显示，滚动放大缩小，可前后切换图片
js特效-jQuery H5弹出图片放大缩小旋转插件
一款国外网站翻译过来的图片放大效果，国内至今还未见过此效果。双击图片，图片独立显示，其他内容变暗，点击放大镜，图片放大，效果不错
那么你可以将鼠标悬停在图片上，滚动鼠标滚轮即可实现图片的放大或者缩小效果 使用方法： 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可
jQuery 图片放大、缩小 拖动滚动控制.zip
这是一款jQuery局部图片放大缩小效果的插件。图片上有几个锚点，点击可以将锚点附近的景象放大，还可以通过返回按钮将图片返回到原图。
jquery图片的放大缩小旋转
一个简单的 针对同一张图片，点击图片放大，再点击缩小.
jquery放大缩小文字导航
这个头像上传裁剪是参照新浪微博个人中心的，支持裁剪缩小放大，并且可预览三种不同尺寸的放大镜图片效果。支持手机等app移动设备。 图片剪切上传演示地址：http://www.sucaihuo.com/js/910.html
jquery手机版网页手动控制放大缩小图片代码
jQuery适用于手机端图片放大缩小翻转代码 jQuery适用于手机端图片放大缩小翻转代码 jQuery适用于手机端图片放大缩小翻转代码