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

評等結果

點擊便能為這篇文章進行評等！

[評等總次數: 0，平均評等: 0]

功能說明：許多時候我們不希望限制使用者上傳圖片的大小，但在後台中又要能讓他預覽上傳的圖片，所以我都會使用一個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]