JQuery，图片的放大和缩小

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="data:images/zoomFullScreen.jpg"/></div><div id="positionButtonDiv"><p><span><img id="zoomInButton" class="zoomButton" src="data:images/zoomIn.png" title="zoom in" alt="zoom in"/><img id="zoomOutButton" class="zoomButton" src="data: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="data: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，图片的放大和缩小相关推荐

实例讲解如何利用jQuery设置图片居中放大或者缩小
大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...
java图片的放大与缩小
java图片的放大与缩小 public Swingtest002() {// 设置标题setTitle("请登陆");// 绝对布局setLayout(null);// 定义一个容 ...
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
查看本章节查看作业目录需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
javaScript实现图片的放大和缩小
在这里我们带领大家来使用javaScript实现图片的放大和缩小.实现的效果图如下点击放大按钮,图片会放大,当放大到一定程度的时候,图片不能再放大,会弹出一个提示框,不能再放大了,点击缩小按钮,图片 ...
鼠标滚轮控制图片的放大和缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSDN写博客图片的放大、缩小、去水印、居中
放入图片可以是QQ的截图或本地图片放入一张图片,Ctrl + V 这是默认样式自动生成的链接如下去自动生成的水印(大图会自动生成水印,小图不会) 只需要将图片链接后面的多余的去掉即可,如下框出来 ...
安卓基础学习 Day18|按键事件+手势操作（图片的放大、缩小、切换）
目录一.按键事件的概念二.案例演示 1.提出要求 2.主布局资源文件 3.主界面一.触摸事件的概述触摸分类触摸动作触摸监听器触摸方法触点个数与坐标二.单点触摸案例:移动米老鼠提出 ...
通过Java代码实现图片的放大和缩小
本文介绍的例子在Android安卓手机上测试通过. 先看看效果吧.可以看到这个开发好的安卓应用有三个按钮:Zoom In缩小图片,Zoom Out放大图片和Save保存. 初始页面: 可以在左边边框自 ...
android imageview点击图片放大缩小,Android实现ImageView图片双击放大及缩小
病人肝癌肿瘤治疗前9.0*8.8cm,通过一疗程服药治疗缩小到8.0*7.3cm. 肝肿瘤9.0*8.8cm 肝肿瘤缩小到8.0*7.3cm 河南偃师任某某乙肝癌肿瘤治疗前6.7*9.3cm,通过一疗 ...

JQuery，图片的放大和缩小

JQuery，图片的放大和缩小相关推荐

最新文章

热门文章