JuilinChungJuilinChung
首先..雖然在寫系統時常常會用到jquery 但並沒有針對他的指令有做太深入的研究...

剛好這一次客戶有這樣的需求....為了捨棄Flash所以需要用jquery animate實現一些動態效果...

客戶的需求說明如下
動態說明:
1.兩個瓶身各從左右兩旁滑進來、兩行文案各從上下滑進
2.兩旁的小物件(泡泡、花朵、蝴蝶)從瓶身兩旁飛出,定位後上下左右微微飄浮
3.滑鼠移到任一產品→畫面再往左或右移10-20%、另一產品打朦成前後景→點選連結至(產品介紹)

在這裡先用了div區塊來代表每一個元件...

p01和p02分別代表左右要滑進來的產品...

s01到s06則是泡泡、花朵、蝴蝶這些小元件

在css部份
#p01{background-color:#09F; position:absolute; left:0; z-index:999;}//定意產品1一開始位置
#p02{background-color:#930; position:absolute; right:0; z-index:999;}////定意產品2一開始位置

#p01,#p02{//產品1跟產品2一開始設定為透明
opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */
}
#s01,#s02,#s03,#s04,#s05,#s06{//元件1到6一開始也設定為透明
opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */
}

.blur {//滑鼠移入產品時必須將另一個產品模糊
-webkit-filter: blur(5px); /* Chrome, Opera */
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.default{//若沒移入滑鼠的預設值
width:350px; height:400px;
top:200px;
}
.s_default{width:50px; height:50px; margin:0 auto; position:relative;}

接著是body間的內容
<div style="padding-top:200px; text-align:center">
<div id="p01" class="default">
<div id="p02" class="default">
<div id="s01" style="background-color:#F60; top:50px; z-index:0" class="s_default">
<div id="s02" style="background-color:#63C; top:0px;z-index:1" class="s_default">
<div id="s03" style="background-color:#3C0; top:-50px;z-index:2" class="s_default">
<div id="s04" style="background-color:#0C9; top:-100px;z-index:3" class="s_default">
<div id="s05" style="background-color:#F3C; top:-150px;z-index:4" class="s_default">
<div id="s06" style="background-color:#9CF; top:-200px;z-index:5" class="s_default">


再來是javascript部份...一開始讓產品由左右2邊滑入到畫面中間指定位置...
並且將小元件從畫面中間向四周散開...
先載入jquery.min.js...
$(document).ready(function () {

$('#p01').animate({opacity:1,left:"25%"},3000);
$('#p02').animate({opacity:1,right: "25%"},3000);

$('#s01').animate({opacity: 1,right: "28%",top: "-=50px",width:"50px",height:"50px" },1000);
$('#s02').animate({opacity: 1,left: "35%",top: "+=20px",width:"50px",height:"50px"},1000);
$('#s03').animate({opacity: 1,right: "30%",top: "+=60px",width:"50px",height:"50px"},1200);
$('#s04').animate({opacity: 1,left: "28%",top: "+=90px",width:"80px",height:"80px"},1000);
$('#s05').animate({opacity: 1,right: "40%",top: "+=150px",width:"70px",height:"70px"},900);
$('#s06').animate({opacity: 1,left: "40%",top: "+=250px",width:"70px",height:"70px"},900);

});

接著讓散開的小元件持續上下飄動...
$(document).ready(function sss() {//讓動畫重覆動作

$('#s01').animate({top: "0px"}, "slow");$('#s01').animate({top: "+=8px"}, "slow");

$('#s02').animate({top: "0px"}, "slow");$('#s02').animate({top: "+=8px"}, "slow");

$('#s03').animate({top: "0px"}, "slow");$('#s03').animate({top: "+=8px"}, "slow");

$('#s04').animate({top: "0px"}, "slow");$('#s04').animate({top: "+=8px"}, "slow");

$('#s05').animate({top: "0px"}, "slow");$('#s05').animate({top: "+=8px"}, "slow");

$('#s06').animate({top: "0px"}, "slow");$('#s06').animate({top: "+=8px"}, "slow");

setTimeout(sss,1000);

});

接著讓滑鼠移入單1產品後..另一價個產品模糊掉

/* 建立 onload 事件 */
$(function(){
$("#p01").mouseover(function(){
$('#p01').animate({opacity: 1,left: "23%",top:"-=50px",width:"380px",height:"434px" },600);
$('#p02').animate({opacity: 1,right: "23%",top:"-=30px",width:"320px",height:"366px" },600);
$('#p02').removeClass('default').toggleClass('blur').fadeIn('fast');

});

$("#p01").mouseout(function(){
$('#p01').animate({opacity: 1,left: "25%",top:"+=50px",width:"350px",height:"400px" },600);
$('#p02').animate({opacity: 1,right: "25%",top:"+=30px",width:"350px",height:"400px" },600);
$('#p02').removeClass('blur').toggleClass('default').fadeIn('fast');
});

$("#p02").mouseover(function(){
$('#p02').animate({opacity: 1,right: "23%",top:"-=50px",width:"380px",height:"434px" },600);
$('#p01').animate({opacity: 1,left: "23%",top:"-=30px",width:"320px",height:"366px" },600);
$('#p01').removeClass('default').toggleClass('blur').fadeIn('fast');

});

$("#p02").mouseout(function(){
$('#p02').animate({opacity: 1,right: "25%",top:"+=50px",width:"350px",height:"400px" },600);
$('#p01').animate({opacity: 1,left: "25%",top:"+=30px",width:"350px",height:"400px" },600);
$('#p01').removeClass('blur').toggleClass('default').fadeIn('fast');
});
});

但目前所有物件出現的時間點是一樣的...因此對物件設定了出現的延遲時間...在一開始的地方

$(function(){
$('#p01').delay(700).fadeIn(3000);
$('#p02').delay(700).fadeIn(3000);
$('#s01').delay(4200).fadeIn(2000);
$('#s02').delay(4200).fadeIn(2000);
$('#s03').delay(4200).fadeIn(2000);
$('#s04').delay(4200).fadeIn(2000);
$('#s05').delay(4200).fadeIn(2000);
$('#s06').delay(4200).fadeIn(2000);

});

這樣就先完成初部的動態...接下來還得細修讓整個動作是更流暢的......

後話...其實覺得用這樣的方式並不會是最洽檔...想應該有更方便好用的方法....

目前的方式只是將jquery animate最基礎的一些動作加以組合成客戶要的變化而已....


測試位置連結網址

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

Welcome To Google

Welcome To Google

Top第一天,參訪了Google APAC HQ 第一次來到Google,難掩興奮心情...

javascript 底下使用 htmlspecialchars

javascript 底下使用 htmlspecialchars

pexelsphoto Javascript中使用一個函數達到PHP...

在手機上如何建立網址到手機桌面中並且使用圖示

在手機上如何建立網址到手機桌面中並且使用圖示

上回做專案時,客戶說了手機桌面上的網站捷徑太醜,想要美化。 這回索性也...

請選擇選項

執行錯誤

Hi,謝謝你的參與,但無法重複投票哦~