簡單的 jquery 圖片特效
[i=s] 本帖最後由 jocosn 於 2012-9-22 21:44 編輯 [/i]圖片依序顯示。
注意重點：使用 arguments.callee 呼叫匿名函式。
----------------------------------------------------------------------------------
[color=purple]HTML & CSS[/color][code]
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>
[/code][color=purple]jQuery[/color][code]$(window).load(function(){
$('.productdemo img').first().fadeIn(1000, function(){
$(this).next().fadeIn(1000, arguments.callee);
});
});
[/code]----------------------------------------------------------------------------------
結果：
[url=http://jsfiddle.net/nvanQ/1/]http://jsfiddle.net/nvanQ/1/[/url]
執行請點 【Run】
///////////////////////////////////////////////////////////////////
簡單應用
圖片由右至左移出[code]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();
});
[/code][url=http://jsfiddle.net/nvanQ/5/]http://jsfiddle.net/nvanQ/5/[/url]
見這 [url=http://web5go.blogspot.tw/2012/09/jquery.html]jquery 圖片淡入與移出[/url] [i=s] 本帖最後由 jocosn 於 2015-5-17 16:57 編輯 [/i]
Lava lamp 模擬
執行效果：
當滑鼠滑到表單小圖示時，下方有個指標會跟著移動
程式重點：
1. 如何使用 jQuery 取得 menu 小圖示的相對位置
2. menu 小圖示的位置可紀錄在陣列、或 .data() 內、或物件內
因位置不會變動，國外範例大都紀錄在 .data() 內(為什麼我也不曉得，還請賜教)，此處是偷懶省步驟，所以紀錄在陣列。
3. 如何設計 menu 小圖示的 position
-------------------------------------------------------------------------------------------------------
HTML & CSS[code]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>[/code]jQuery[code]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] });
});[/code]-------------------------------------------------------------------------------------------------------
執行結果：
[url]http://jsfiddle.net/C7E48/[/url]
[url]http://jsfiddle.net/uXzDf/4/[/url]
你可以自己修改程式碼後直接 RUN 看看能不能跑(不要 update)。
國外範例(下方長條圖或背景方框變動也是類似道理。)
‧[url=http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/]LavaLamp for jQuery lovers[/url]
‧[url=http://www.devthought.com/2007/01/29/cssjavascript-true-power-fancy-menu/]CSS+Javascript power. Fancy menu.[/url]
‧[url=http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery]Simple Lava Lamp Menu Tutorial with jQuery[/url]
[url=http://web5go.blogspot.tw/2012/09/lava-lamp.html]解說[/url]
頁:
[1]