jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: 簡單的 jquery 圖片特效 [打印本頁]

作者: jocosn 時間: 2012-9-18 03:59 標題: 簡單的 jquery 圖片特效

本帖最後由 jocosn 於 2012-9-22 21:44 編輯

圖片依序顯示。
注意重點：使用 arguments.callee 呼叫匿名函式。
----------------------------------------------------------------------------------

HTML & CSS

CSS
.productdemo img {
        display:none;
}


HTML
<div class="productdemo">
        <img src="http://jsgears.com/_icons/11.png">
        <img src="http://jsgears.com/_icons/12.png">
        <img src="http://jsgears.com/_icons/14.png">
        <img src="http://jsgears.com/_icons/15.png">
</div>

jQuery

$(window).load(function(){
        $('.productdemo img').first().fadeIn(1000, function(){
                $(this).next().fadeIn(1000, arguments.callee);
        });
});

----------------------------------------------------------------------------------
結果：
http://jsfiddle.net/nvanQ/1/
執行請點【Run】

///////////////////////////////////////////////////////////////////
簡單應用
圖片由右至左移出

CSS
.productanimate {
 position: relative;
 width : 150px;
 height: 60px;
 border:1px solid black;
 overflow: hidden;
}

HTML
<div class="productanimate">
 <img src="http://jsgears.com/_icons/11.png">
 <img src="http://jsgears.com/_icons/12.png">
 <img src="http://jsgears.com/_icons/14.png">
 <img src="http://jsgears.com/_icons/15.png">
</div>

jQuery
function func() { 
     // x 為圖片寬度(包括 padding, border, margin) 
     x = $('.productanimate img').first().outerWidth(true), distance = x/2; 
     $('.productanimate img').show().each(function(i){ 
          $(this).css({ 
               // 每張圖片間格為圖片寬度的一半 
               left: i*distance , 
               opacity : 0.2 
          }) 
    
    }); 
    $('.productanimate img').first() 
          .animate({opacity : 1}, 500) 
          .delay(1000) 
          .animate( { left: '-' + x + 'px'}, 1200 , function(){ 
               x += distance; 
               duration = 1200 + loopcount * 200; 
               ++loopcount ; 
               $(this).next() 
                    .animate({opacity : 1}, 500) 
                    .animate({ left: '-' + x + 'px' }, duration, arguments.callee); 
      }); 
     setTimeout(func, 8000); // 所有動畫執行完畢後再次呼叫 function 再執行一次 
}; 
  
var x, distance, duration, loopcount = 0; 
$(window).load(function(){ 
     func(); 
});

http://jsfiddle.net/nvanQ/5/

見這 jquery 圖片淡入與移出

作者: jocosn 時間: 2012-9-18 05:02

本帖最後由 jocosn 於 2015-5-17 16:57 編輯

Lava lamp 模擬
執行效果：
當滑鼠滑到表單小圖示時，下方有個指標會跟著移動

程式重點：
1. 如何使用 jQuery 取得 menu 小圖示的相對位置
2. menu 小圖示的位置可紀錄在陣列、或 .data() 內、或物件內
因位置不會變動，國外範例大都紀錄在 .data() 內(為什麼我也不曉得，還請賜教)，此處是偷懶省步驟，所以紀錄在陣列。
3. 如何設計 menu 小圖示的 position
-------------------------------------------------------------------------------------------------------
HTML & CSS

CSS
#wrapper {
        position: relative;
        float: right;      /* 靠右，隨便靠 */
        right: 10%;     /* 隨心設定 */
        width: 210px;   /* 所有MENU小圖示都可容納顯示即可 */
        height: 90px;    /* 若沒設定高度，滑鼠移過時 MENU 會變高，造成下方區塊內容往下移 */
        border: 1px solid black;  /* 可省略 */
}

#mainmenu img {
        position: relative;   /* 方便你取得各 image 相對位置用 */
        overflow: hidden;
}
#menuhover {
        position: relative;
        display: none;
}

HTML
<div id="wrapper">
        <div id="mainmenu">
                <img src="http://jsgears.com/_icons/11.png">
                <img src="http://jsgears.com/_icons/12.png">
                <img src="http://jsgears.com/_icons/14.png">
                <img src="http://jsgears.com/_icons/15.png">
        </div>
        <img id="menuhover" src="http://jsgears.com/images/common/online_member.gif">
</div>

jQuery

var aryPosX = [];
$('#mainmenu img').each(function(){
        aryPosX.push($(this).position().left);
});
$('#mainmenu img').mouseenter(function(){
        var idx = $(this).index();    // 取得 img 在 #mainmenu 的位置順序，值為 0、1、2、3，配合從 aryPosX 陣列內取值
        $('#menuhover')
                .show()
                .stop(true, false)    // 注意這裡的 stop 設定
                .animate({ 'left': aryPosX[idx] });
});

-------------------------------------------------------------------------------------------------------
執行結果：
http://jsfiddle.net/C7E48/
http://jsfiddle.net/uXzDf/4/

你可以自己修改程式碼後直接 RUN 看看能不能跑(不要 update)。

國外範例(下方長條圖或背景方框變動也是類似道理。)
‧LavaLamp for jQuery lovers
‧CSS+Javascript power. Fancy menu.
‧Simple Lava Lamp Menu Tutorial with jQuery

解說

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)