記憶加載中,請稍待...
Hello,你已經閒置了一些時間~
或許,你有興趣閱讀一篇故事:
JuilinChung
鎖住記憶
選擇大頭貼照
重新調整位置

使用jquery animate達到動態效果

收藏小紙條

無法截取內容!!但仍舊可以收藏小紙條

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



測試位置連結網址
L O A D I N G
閱讀分類:寫程式筆記  

其他您可能會有興趣的故事

2015除夕夜
PHP數字轉國字

須同意使用 Email 才可進入此頁面

須同意使用 姓名 才可進入此頁面

須同意使用 性別 才可進入此頁面

須同意應用程式才能使用Facebook帳號進入此頁面

請重新登入!

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

Hi,請選擇一個你認為的答案

錯誤的URL...

執行錯誤...

別忘了填寫欄位...

輸入格式錯誤...

Email已經有人使用...

請填寫Email...

請填寫正確的Email...

密碼裡需包含英文字及數字8至12...

確認密碼是否與密碼相同...

很抱歉 您並沒有權限!請確認您的帳號密碼 或請連絡我們

正在更新排序...

帳號已經存在!請確認您的帳號密碼 或請連絡我們...