功能說明:許多時候我們不希望限制使用者上傳圖片的大小,但在後台中又要能讓他預覽上傳的圖片,所以我都會使用一個div 然後用背景的方式去顯示
語法如下

<div style="background-image:url('./file/xxx.jpg');background-size:cover;background-position:center;"></div>

但這樣使用者就無法看到全部的圖片,所以我就想說讓使用者滑鼠移過去時讓背景圖片位移,這樣就可以看到圖片的所有內容。

onmouseover="$(this).animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 1000, 'linear');"

onmouseover="$(this).animate({
  'background-position-x': 水平位移,
  'background-position-y': 垂直位移
}, 秒數, 動畫類型);

內建的兩種動畫方式
swing
linear
若想要其它種可以加入這個外掛
官網介紹:
http://easings.net/zh-tw
下載位置:
http://gsgd.co.uk/sandbox/jquery/easing/

掛載js 請使用以下cdn連結

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
喜歡我的文章嗎?歡迎按讚加分享/留言交流,或是點擊下方廣告讚助我喝一杯咖啡吧 ^_^ ⇩⇩⇩

Leave a comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *