我已经谷歌搜索好几天了......我还没有找到答案。你能帮助我吗？谢谢
我在图片上测试了jquery.panzoom.js和jquery mousewheel.js .. 有效！ 但它并没有在我的地铁站地图上工作，该地图使用了另一个js＆＃34; ul＆＃34;和＆＃34; li＆＃34;内.. 这是我的地铁站地图的代码..是否可以使用panzoom.js？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Subway Map</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.subwayMap-0.5.0.js"></script>
<script src="jquery.js"></script>
<script src="jquery.panzoom.js"></script>
<script src="jquery.mousewheel.js"></script>
</head>
<body>
<div class="panzoom">
<div class="subway-map" data-columns="100" data-rows="20" data-cellSize="40" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="false" data-lineWidth="8"> //create subway station
<ul data-color="#ff00ff" data-label="Jakarta Kota - Gambir - Manggarai - Depok">
<li data-coords="2,6">\n\nJakarta\nKota</li>
<li data-coords="3.4,6">\n\nJayakarta</li>
<li data-coords="4.8,6">\n\nMangga\nBesar</li>
<li data-coords="6,6">\n\nSawah\nBesar</li>
<li data-coords="7.1,6">\n\nJuanda</li>
<li data-coords="8.3,6" data-marker="interchange">\n\nGambir</li>
<li data-coords="9.8,6">\n\nGondangdia</li>
<li data-coords="11.2,6">\n\nCikini</li>
<li data-coords="13.2,6" data-marker="interchange">\n\nManggarai</li>
<li data-coords="14.5,6">\n\nTebet</li>
<li data-coords="15.7,6">\n\nCawang</li>
<li data-coords="17,6">\n\nDuren\nKalibata</li>
<li data-coords="18.3,6">\n\nPasar\nMinggu\nBaru</li>
<li data-coords="19.5,6">\n\nPasar\nMinggu</li>
<li data-coords="20.7,6">\n\nTanjung\nBarat</li>
<li data-coords="22,6">\n\nLenteng\nAgung</li>
<li data-coords="23.4,6">\n\nUniv.\nPancasila</li>
<li data-coords="24.7,6">\n\nPondok\nCina</li>
<li data-coords="26,6">\n\nDepok\nBaru</li>
<li data-coords="27.3,6">\n\nDepok</li>
</ul>
</div>
</div>
<div id="legend"></div>
<script type="text/javascript">
$(".subway-map").subwayMap({ debug: true });
</script>
<script>
(function() {
var $section = $('#focal');
var $panzoom = $section.find('.panzoom').panzoom();
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: false,
focal: e
});
});
})();
</script>
</body>
</html>
它应该是这样的： Before
但是当我添加<script src="jquery.js"></script>时
输出成为：
After
