[ JQUERY ] – 背景圖片位移動畫效果 background-image background-position animate

功能說明：許多時候我們不希望限制使用者上傳圖片的大小，但在後台中又要能讓他預覽上傳的圖片，所以我都會使用一個div 然後用背景的方式去顯示
語法如下
[html]
<div style="background-image:url(‘./file/xxx.jpg’);background-size:cover;background-position:center;"></div>
[/html]
但這樣使用者就無法看到全部的圖片，所以我就想說讓使用者滑鼠移過去時讓背景圖片位移，這樣就可以看到圖片的所有內容。
[html]
onmouseover="$(this).animate({
‘background-position-x’: ‘10%’,
‘background-position-y’: ‘20%’
}, 1000, ‘linear’);"
onmouseover="$(this).animate({
‘background-position-x’: 水平位移,
‘background-position-y’: 垂直位移
}, 秒數, 動畫類型);
[/html]
內建的兩種動畫方式
swing
linear
若想要其它種可以加入這個外掛
官網介紹：
http://easings.net/zh-tw
下載位置：
http://gsgd.co.uk/sandbox/jquery/easing/
掛載js 請使用以下cdn連結
[javascript]<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>[/javascript]

現貨超低價 小新玩偶 蠟筆小新 動感新生活係列 潮玩 小新公仔

維力 素飄香 野菜多 素排骨雞 素紅燒牛肉 麻辣燙 麻油當歸枸杞 蔘湯麵 素食 泡麵 單包

Xilla 露營 戶外 大力夾雲台手機支架 拓展支架 球型雲台夾 手機架

3M 日本原裝進口 速效型 防水噴霧 170ml 衣物 鞋子 皮革 透氣 防水 團購