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="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这个库中,不引入是

实现不了的。

?

?六、完整代码:

?见附件

?

?

?

?

?

?

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。