jquery复古卷轴全景地图拖动查看效果代码



208 829 277



特效描述:全景地图 拖动查看效果,拖动全景小图,卷轴中的大图显示相应部分,大图中可定义焦点按钮

代码结构

1. 引入CSS

<link rel="stylesheet" rev="stylesheet" type="text/css" media="all" href="in1.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="all" href="in1.css" />

2. 引入JS

<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" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.imageScroller.min1.js"></script>

3. 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>重庆安居古城旅游官方网站</title>
</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="http://www.17sucai.com/" /><!-- 黄家坝 -->
			<area shape="rect" coords="833,54,923,77"  href="http://www.17sucai.com/" /><!-- 波仑寺 -->
			<area shape="rect" coords="1211,327,1326,349" href="http://www.17sucai.com/" /><!--古城码头  -->
			<area shape="rect" coords="2291,111,2383,132" href="http://www.17sucai.com/" /><!--星辉门  -->
			<area shape="rect" coords="2047,78,2135,99" href="http://www.17sucai.com/" /><!--天后宫  -->
			<area shape="rect" coords="1966,55,2046,93" href="http://www.17sucai.com/" /><!--湖广会馆  -->
			<area shape="rect" coords="1545,67,1615,104" href="http://www.17sucai.com/" /><!-- 火神庙 -->
			<area shape="rect" coords="1302,131,1417,155" href="http://www.17sucai.com/" /><!--王翰林院  -->
			<area shape="rect" coords="1645,252,1736,276" href="http://www.17sucai.com/" /><!--引凤门  -->
			<area shape="rect" coords="2670,142,2761,163" href="http://www.17sucai.com/" /><!--城隍庙  -->
			<area shape="rect" coords="2796,132,2888,155" href="http://www.17sucai.com/" /><!--玄天宫  -->
		</map>
		<div class="preview" ><img src="images/xiao1.jpg" alt="" /></div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	$('div.map').imageScroller();
});
document.ondragstart=function() {return false;}
</script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 图片拖动 图片全屏 带标题的焦点图 滚动切换 文字拖动 文字全屏 带缩略图的幻灯片 带简介的焦点图 图片滚动 拖动排序 360全景 图片轮播 文字滚动 自动滚动图片轮播 弹出层拖动 图片文字滚动 马赛克幻灯片 全屏滚动 全屏焦点图 页面滚动 滚动流动 flash焦点图 拖动拽动 自动滚动图片轮播 全屏焦点图 全屏切换 宽屏全屏满屏 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到