首先，公司專案內部裡實現利用許多張圖片（30多張圖片）製作成一個動畫，效果是滑鼠停留時實現img的自動轉化。

我的思路有2：

1.js 做mouseover事件觸發處理，利用setInteval（）傳入function和週期隔離事件50ms，但是在實現了相關方法之後在本地可以跑通效果，在預釋出環境下出現了卡頓現象，難以出現相關的效果（js請求太多了）!!! 大佬說可以做一下限流實現，我還沒做過，轉戰方法二了，程式碼事例如下：

    var i = -1;
    var num = "";
    var _interval;
    var icon_name;
    // js動畫效果
    $(document).ready(function(){
       $(".icon-dyn").mouseover(function () {
           icon_name=this.id;
           _interval=setInterval(function () {
               i++;
               if(i<10){
                   num ="0"+i;
               }else if(i<34){
                   num = i+"";
               }else{
                    i=-1;
                    num="00";
               }
               var img_addr= "css/i/dynamic_icons/"+ icon_name +"/"+icon_name+"_"+num+".png";
               $("#"+icon_name).attr("src",img_addr);
           },50);
       });
        $(".icon-dyn").mouseout(function () {
            icon_name=this.id;
            window.clearInterval(_interval);
            resetImg();
        });
    });
    function resetImg() {
        $("#"+icon_name).attr("src", "css/i/dynamic_icons/"+ icon_name +"/"+icon_name+"_00.png");
    }
 

2.css3實現多一個長圖片的讀取，background:url(#長圖片資源路徑#)，對該層設定css3動畫效果，具體事例參考的是部落格中的做法 ----點選開啟連結。那麼下面整個步驟存在著以下問題：

   2.1：製作長圖片（拼接問題）

            大佬說可以用ps弄，自己弄了好久，對後端人感覺好難。。。所以找了段java程式碼實現圖片的拼接、剪輯功能的如下：

 public static void mergeImage(String[] files, int type, String targetFile) {
        int len = files.length;
        if (len < 1) {
            throw new RuntimeException("圖片數量小於1");
        }
        File[] src = new File[len];
        BufferedImage[] images = new BufferedImage[len];
        int[][] ImageArrays = new int[len][];
        for (int i = 0; i < len; i++) {
            try {
                src[i] = new File(files[i]);
                images[i] = ImageIO.read(src[i]);
            } catch (Exception e) {
                throw new RuntimeException(e);
            }
            int width = images[i].getWidth();
            int height = images[i].getHeight();
            ImageArrays[i] = new int[width * height];
            ImageArrays[i] = images[i].getRGB(0, 0, width, height, ImageArrays[i], 0, width);
        }
        int newHeight = 0;
        int newWidth = 0;
        for (int i = 0; i < images.length; i++) {
            // 橫向
            if (type == 1) {
                newHeight = newHeight > images[i].getHeight() ? newHeight : images[i].getHeight();
                newWidth += images[i].getWidth();
            } else if (type == 2) {// 縱向
                newWidth = newWidth > images[i].getWidth() ? newWidth : images[i].getWidth();
                newHeight += images[i].getHeight();
            }
        }
        if (type == 1 && newWidth < 1) {
            return;
        }
        if (type == 2 && newHeight < 1) {
            return;
        }

        // 生成新圖片
        try {
            BufferedImage ImageNew = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);
            int height_i = 0;
            int width_i = 0;
            for (int i = 0; i < images.length; i++) {
                if (type == 1) {
                    ImageNew.setRGB(width_i, 0, images[i].getWidth(), newHeight, ImageArrays[i], 0,
                            images[i].getWidth());
                    width_i += images[i].getWidth();
                } else if (type == 2) {
                    ImageNew.setRGB(0, height_i, newWidth, images[i].getHeight(), ImageArrays[i], 0, newWidth);
                    height_i += images[i].getHeight();
                }
            }
            //輸出想要的圖片
            ImageIO.write(ImageNew,"png", new File(targetFile));

        } catch (Exception e) {
            throw new RuntimeException(e);
        }

    }
 

注：如果給的是png檔案可能存在透明度問題，在使用程式碼進行拼接的時候可能存在著問題，（target圖片大小不變，但是裡面的rgb值也就是顏色變了），笨一點的話用畫圖轉jpg就會去掉那些透明度了~~~  也可以用ps錄個動作~~~~：》

2.2background的坑

    這裡面的樣例是採用的background引入圖片，但是往往這個父層存在著相關的子元素（就是圖片），而background的index是最低的，也就是所有的子元素往往是遮蓋在background上（悲劇）。。。目前我的方法是hover偽類選擇器下對子元素做出display：none操作~~~也不知道有沒有大神告知聰明一點的方法

  2.3 動畫設計

 div{
            width:140px;
            height:140px;
            background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
            animation:run 1s steps(1, start) infinite;
                -webkit-animation:run 1s steps(1, start) infinite;
        }

@keyframes run{
    from{
        background-position: 0 0;
    }
    to{
        background-position: -1540px 0 ;
    }
}