錨定在圖像中

Question

只是爲了好奇，是否有可能在圖像中定義錨點？假設我有一個圖像，我想跳到它的中間（垂直或水平），那有可能嗎？ （不管它是純html還是藉助於javascript或其他技巧）。那麼，打破兩個圖像肯定會使這更容易，但除此之外有什麼方法可用？

Answer 1

當然可以！考慮混合<map>，<area>和<img>元素這樣

<map name="mymap"> 
    <area shape="rect" coords="174,240,400,370" onclick="alert('an area!')"/> 
    <area shape="rect" coords="19,378,120,480" onclick="alert('another area!')"/> 
    <area shape="rect" coords="0,507,399,549" onclick="alert('the bottom area!')"/> 
</map> 
<img src="myimage.png" usemap="#mymap" ismap> 

這裏有一個plunkr！點擊框，頁腳橫幅和精美圖片即可欣賞真棒。

Answer 2

你可以使用jQuery scrollTo並指定窗口內的絕對位置。例如，如果您的圖像高度爲2000像素，則會在頁面中獲取圖像的絕對位置，然後將該位置添加到要移動到的圖像中的位置。爲了達到這樣的圖像的中間，如果它位於100像素，你會使用$(...)scrollTo("1100px", 0)

對於全參考有關scrollTo：http://demos.flesler.com/jquery/scrollTo/