jquery全景拖动查看效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery全景拖动查看效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery全景拖动查看效果</title>
<link rel="stylesheet" rev="stylesheet" type="text/css" media="all" href="in1.css" />
</head>
<body class="mapbg">
<div class="map_all" id="image">
	<div class="map">
		<img src="images/da.gif" class="feature-image"  usemap="#Map1" style="left: -1302px;" />
		<map name="Map1" id="Map">
			<area shape="rect" coords="145,318,235,342" href="#" /><!-- 黄家坝 -->
			<area shape="rect" coords="833,54,923,77"  href="#" /><!-- 波仑寺 -->
			<area shape="rect" coords="1211,327,1326,349" href="#" /><!--古城码头  -->
			<area shape="rect" coords="2291,111,2383,132" href="#" /><!--星辉门  -->
			<area shape="rect" coords="2047,78,2135,99" href="#" /><!--天后宫  -->
			<area shape="rect" coords="1966,55,2046,93" href="#" /><!--湖广会馆  -->
			<area shape="rect" coords="1545,67,1615,104" href="#" /><!-- 火神庙 -->
			<area shape="rect" coords="1302,131,1417,155" href="#" /><!--王翰林院  -->
			<area shape="rect" coords="1645,252,1736,276" href="#" /><!--引凤门  -->
			<area shape="rect" coords="2670,142,2761,163" href="#" /><!--城隍庙  -->
			<area shape="rect" coords="2796,132,2888,155" href="#" /><!--玄天宫  -->
		</map>
		<div class="preview" ><img src="images/xiao1.jpg" alt="" /></div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.imageScroller.min1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('div.map').imageScroller();
});
document.ondragstart=function(){return false;}
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)