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这个库中,不引入是
实现不了的。
?
?六、完整代码:
?见附件
?
?
?
?
?
?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。