jquery zoom窗口放大图片拖动查看特效代码下载


jquery zoom窗口放大图片拖动查看特效代码下载
jquery zoom窗口放大图片拖动查看特效代码下载以及窗口放大、图片拖动查看等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="styles.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/e-smart-zoom-jquery.min.js"></script>
<script src="http://libs.useso.com/js/html5shiv/3.6/html5shiv.min.js"></script>

3. HTML代码

<div id="pageContent">
	<div id="imgContainer"><img id="imageFullScreen" src="assets/zoomFullScreen.jpg"/></div>
	<div id="positionButtonDiv">
		<p>
			<span>
				<img id="zoomInButton" class="zoomButton" src="assets/zoomIn.png" title="zoom in" alt="zoom in" />
				<img id="zoomOutButton" class="zoomButton" src="assets/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="assets/position.png" usemap="#positionMap" />
			</span>
		</p>
	</div>
</div>

相关推荐

发表评论

相关文章