首頁 > 網際網路

jquery動態背景程式碼如何使用

2019-12-11 10:54:42

以下介紹幾種動態背景的方式:

1)通過Jquery動態切換背景圖

2)通過Jquery設定圖片偏移量達到動態的效果

3)通過其他外掛實現背景圖片輪播

4)通過Html5的canvas繪製動態效果

1

【通過Jquery動態切換背景圖】建立如下結構的測試檔案

     JqueryDynamic

       -- Content

           -- Images

               -- (新增多張圖片)

           -- Scripts

               -- jquery-1.11.3.min.js

       -- HTMLPage1.html


2

【通過Jquery動態切換背景圖】在頁面中引入Jquery,新增測試程式碼如下


3

【通過Jquery動態切換背景圖】每隔1秒變換背景圖效果如下



4

【通過Jquery設定圖片偏移量達到動態的效果】在背景圖上面漂浮另外一個背景圖,然後,一個左移一個右移,達到動態效果


5

【通過Jquery設定圖片偏移量達到動態的效果】效果如下



6

【通過其他外掛實現背景圖片輪播】例如:Jssor slider


7

【通過Html5的canvas繪製動態效果】例如搜尋「Html5 canvas 火焰」就可以看到下面效果



IT145.com E-mail:sddin#qq.com