ChungChung
首先..雖然在寫系統時常常會用到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最基礎的一些動作加以組合成客戶要的變化而已....


測試位置連結網址

作者簡介

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

訪客留言

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

推薦閱讀

作者其他相關類別故事

瀏覽器升級ie9後FCKEditor無法使用對話框解決方法

瀏覽器升級ie9後FCKEditor無法使用對話框解決方法

原文網址:http://ecshop.tw/bbs/archiver/tid.html...

整合Facebook粉絲專頁的即時訊息,Zotabox網站打造免費線上支援平台。

整合Facebook粉絲專頁的即時訊息,Zotabox網站打造免費線上支援平台。

還記得在msn的年代,msn有提供在網站上架構即時通訊功能,方便網站管理者與user直...

讓圖片上傳前先產生預覽

讓圖片上傳前先產生預覽

專案需要,上傳圖片至網站時先產生預覽圖~ 參考了stackoverflow.com裡討...

請選擇選項

執行錯誤

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

現在就加入innstory,開始紀錄你的故事。

「innstory」是一個儲存故事的地方,我們致力於成為一個有溫度的平台,加深人與人之間的羈絆是我們所努力的方向。
我們深信人與人間的區塊鏈不是只是冷冰冰的運算。現在就加入我們。