jQuery2D縮放是一種方便的解決方案,可在網(wǎng)頁(yè)上縮放圖像或SVG元素。
要進(jìn)行縮放,需要優(yōu)先引入jQuery和jQuery2D插件:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-2dtransform/dist/jquery-2dtransform.min.js"></script>
接下來(lái),需要?jiǎng)?chuàng)建元素并添加數(shù)據(jù):
<svg width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="orange" /> </svg>
然后,使用CSS將元素樣式設(shè)置為可縮放:
svg { cursor: pointer; transition: all 0.5s ease-in-out; }
最后,在jQuery中使用2D變換來(lái)調(diào)整元素大小和位置:
$('rect').click(function() { $(this).animate({ 'transform': 'scale(1.5) translate(25px, 25px)' }); });
這是一個(gè)簡(jiǎn)單的例子,可以根據(jù)需要進(jìn)行調(diào)整以實(shí)現(xiàn)所需的效果。