animate()
創(chuàng)新互聯(lián)建站的客戶(hù)來(lái)自各行各業(yè)，為了共同目標(biāo)，我們?cè)诠ぷ魃厦芮信浜?，從?chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。專(zhuān)業(yè)領(lǐng)域包括網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、電商網(wǎng)站開(kāi)發(fā)、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)。
對(duì)被選元素應(yīng)用“自定義”的動(dòng)畫(huà)
clearQueue()
對(duì)被選元素移除所有排隊(duì)的函數(shù)（仍未運(yùn)行的）
delay()
對(duì)被選元素的所有排隊(duì)函數(shù)（仍未運(yùn)行）設(shè)置延遲
dequeue()
運(yùn)行被選元素的下一個(gè)排隊(duì)函數(shù)
fadeIn()
逐漸改變被選元素的不透明度，從隱藏到可見(jiàn)
fadeOut()
逐漸改變被選元素的不透明度，從可見(jiàn)到隱藏
fadeTo()
把被選元素逐漸改變至給定的不透明度
hide()
隱藏被選的元素
queue()
顯示被選元素的排隊(duì)函數(shù)
show()
顯示被選的元素
slideDown()
通過(guò)調(diào)整高度來(lái)滑動(dòng)顯示被選元素
slideToggle()
對(duì)被選元素進(jìn)行滑動(dòng)隱藏和滑動(dòng)顯示的切換
slideUp()
通過(guò)調(diào)整高度來(lái)滑動(dòng)隱藏被選元素
stop()
停止在被選元素上運(yùn)行動(dòng)畫(huà)
toggle()
對(duì)被選元素進(jìn)行隱藏和顯示的切換
jquery手機(jī)觸屏左右滑動(dòng)切換欄目
$(function(){
TouchSlide({
slideCell:"#slideBox",
titCell:".myhd
ul",
//開(kāi)啟自動(dòng)分頁(yè)
autoPage:true
，此時(shí)設(shè)置
titCell
為導(dǎo)航元素包裹層
mainCell:".bd
ul",
effect:"leftLoop",
autoPage:true,//自動(dòng)分頁(yè)
autoPlay:true
//自動(dòng)播放
});
div
id="slideBox"
class="slideBox"
div
class="bd"
ul
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news1.png"
//a
a
class="tit"
href="#"墨西哥教師罷工
與警察激烈沖突/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news2.jpg"http://a
a
class="tit"
href="#"日右翼游行紀(jì)念釣島"國(guó)有化"周年/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news3.jpg"http://a
a
class="tit"
href="#"女兵競(jìng)選美國(guó)小姐鼓勵(lì)女性自強(qiáng)/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news4.jpg"http://a
a
class="tit"
href="#"濟(jì)南現(xiàn)“最窄人行道”
僅0.2米寬/a
/li
/ul
/div
div
class="myhd"
ul
style="height:
28px;"/ul
/div
/div
可以參考：
為了建立導(dǎo)航菜單，讓我們先看看html結(jié)構(gòu)：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleAnimation Menu Demo/title
link rel="stylesheet" href=""
link href='' rel='stylesheet' type='text/css'
link rel="stylesheet" href=""
script src=""/script
script src="script.js"/script
link rel="stylesheet" href="style.css"
/head
body
!-- Content goes here --
/body
/html
首先，我們引用normalize.css作為默認(rèn)樣式，以確保我們的菜單在每個(gè)瀏覽器是一樣的。我們使用字體圖標(biāo)fontawesome來(lái)顯示菜單項(xiàng)向下的圖標(biāo)。我們還需要引用jQuery來(lái)實(shí)現(xiàn)菜單的切換。
面板按鈕
每個(gè)網(wǎng)站面板導(dǎo)航按鈕都類(lèi)似。它往往是一個(gè)圖標(biāo)字體，如fontawesome，但在本教程中我想添加一些動(dòng)畫(huà)，所以我們用橫線(xiàn)來(lái)實(shí)現(xiàn)。基本上，我們的按鈕是一個(gè)跨度，包含三個(gè)div顯示為水平橫線(xiàn)。
span class="toggle-button"
div class="menu-bar menu-bar-top"/div
div class="menu-bar menu-bar-middle"/div
div class="menu-bar menu-bar-bottom"/div
/span
樣式看起來(lái)如下：
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}
按鈕有一個(gè)固定的位置，不動(dòng)時(shí)滾動(dòng)頁(yè)面。它也有一個(gè) z-index :15的樣式，以保證它總是保持在其他重疊元素之上。按鈕由三條橫線(xiàn)。每橫線(xiàn)都有自已的樣式，我們給它加上.menu-bar樣式。類(lèi)其余的樣式被移動(dòng)到單獨(dú)的樣式文件中。動(dòng)畫(huà)發(fā)生時(shí)，我們添加一個(gè)類(lèi).button-open。我們引用jQuery，可以比較方便的實(shí)現(xiàn)它：
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初學(xué)者可能不熟悉jQuery，讓我解釋一下這是怎么回事。首先，我們初始化一個(gè)變量稱(chēng)為$togglebutton，其中包含我們的按鈕。我們將它存儲(chǔ)為一個(gè)變量，然后我們創(chuàng)建一個(gè)事件監(jiān)視器監(jiān)聽(tīng)點(diǎn)擊按鈕。每單擊一次，事件監(jiān)聽(tīng)器會(huì)執(zhí)行方法 function toggleclass()來(lái)切換.button-open。
.button-open我們可以用它來(lái)改變這些元素的顯示方式。我們使用CSS3 translate()和rotate()功能使頂部和底部的橫線(xiàn)旋轉(zhuǎn)45度，與中間的橫線(xiàn)逐漸消失。你可以點(diǎn)擊Demo中的按鈕來(lái)看看效果。
側(cè)滑菜單
側(cè)滑菜單的html的結(jié)構(gòu)如下：
div class="menu-wrap"
div class="menu-sidebar"
ul class="menu"
lia href="#"Home/a/li
lia href="#"About/a/li
lia href="#"Blog/a/li
li class="menu-item-has-children"a href="#"Click The Arrow/a
span class="sidebar-menu-arrow"/span
ul class="sub-menu"
lia href="#"Alignment/a/li
lia href="#"Markup/a/li
lia href="#"Comments/a/li
/ul
/li
lia href="#"Courses/a/li
lia href="#"Get In Touch/a/li
/ul
/div
/div
在這里不詳細(xì)解釋每個(gè)風(fēng)格的菜單，我們看下.menu-wrap 的div。它的樣式如下：
.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}
它的位置是固定的，所以菜單一直在同一個(gè)地方滾動(dòng)。高度設(shè)為100%。注意，左邊距設(shè)置為負(fù)數(shù)，使這菜單從視圖中消失。為了讓它有一個(gè)出現(xiàn)的特效，我們用jquery來(lái)了調(diào)用另一class來(lái)顯示和關(guān)閉。JavaScript代碼如下：
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});
我們?cè)黾右粋€(gè)變量$menuwrap其中包含菜單的所有項(xiàng)，并使用相同的事件來(lái)創(chuàng)建按鈕。這個(gè).menu-show的左邊距為0，并增加了一些盒子陰影效果。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}
子菜單和鏈接
你可能會(huì)注意到一個(gè)列表項(xiàng)的class .menu-item-has-children。包含子菜單。同時(shí)，鏈接后，有一個(gè)class .sidebar-menu-arrow。
li class="menu-item-has-children"a href="#"Click The Arrow/a
span class="sidebar-menu-arrow"/span
ul class="sub-menu"
!-- List items --
/ul
/li
span 有一個(gè)::after偽元素包實(shí)現(xiàn)fontawesome箭頭。默認(rèn)情況下，子菜單是隱藏的，只有單擊父級(jí)菜單時(shí)才出現(xiàn)：
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
當(dāng)我們單擊箭頭，一個(gè)函數(shù)被調(diào)用時(shí)，它的目標(biāo)的下一個(gè)元素之后的span并使其可見(jiàn)。我們使用的jquery的slidetoggle。它使一個(gè)元素滑動(dòng)效果的出現(xiàn)或消失，函數(shù)有一個(gè)動(dòng)畫(huà)時(shí)間參數(shù)。
最后，我們的演示菜單項(xiàng)有一個(gè)懸停效果。它是使用一個(gè)::after偽元素。代碼如下：
.menu-sidebar li a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li a:hover::after {
background-position: -100% 0;
}
這個(gè)::after偽元素包含在每個(gè)環(huán)節(jié)下絕對(duì)定位的塊級(jí)元素，隨著0.15em高度和寬度。我們不只是應(yīng)用背景顏色的線(xiàn)，我們使用linear-gradient() 在背景圖像功能。雖然這個(gè)功能的目的是使顏色梯度，我們可以通過(guò)指定的百分比，做了一個(gè)漸變的顏色變化。
.menu-sidebar li a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}
這里一半的線(xiàn)是透明的，另一半是黃色的。通過(guò)背景大小200%的寬度，使透明部分占用的所有鏈接的寬度。
建議你下載個(gè)jquery的API手冊(cè)看看，上有詳細(xì)的用法，簡(jiǎn)單明了。
有slideUp slideDown slideToggle三個(gè)方法，up就是收起，Down就是展開(kāi)，toggle是判斷，當(dāng)前如果為收起的就展開(kāi)，展開(kāi)的則收起。
使用jQuery Mobile開(kāi)發(fā)Web App-頁(yè)面切換動(dòng)畫(huà) android
jQuery Mobile包含一組基于CSS3的過(guò)渡動(dòng)畫(huà)（又稱(chēng)轉(zhuǎn)場(chǎng)效果），可以應(yīng)用在任何頁(yè)面或page組件切換。jQuery Mobile默認(rèn)對(duì)頁(yè)面切換和返回按鈕設(shè)置了滑動(dòng)（slide）效果。
要設(shè)定一個(gè)特定過(guò)渡效果，只需要在鏈接上添加一個(gè)data-transition屬性，可以使用以下屬性值：
a data-transition="pop"I'll pop/a
jQuery Mobile提供了6種切換動(dòng)畫(huà)：slide(滑動(dòng))、slideup(向上滑動(dòng))、slidedown(向下滑動(dòng))、pop(拋出)、fade(淡入淡出)和flip(3D翻轉(zhuǎn))。動(dòng)畫(huà)效果見(jiàn)這里。
注意：flip效果在大多數(shù)android瀏覽器上不能被正確渲染，因?yàn)槿鄙賹?duì)3d css transform的支持。不幸的是android并沒(méi)有忽略flip效果，而是使用水平翻轉(zhuǎn)來(lái)替代。所以建議在android完美支持之前謹(jǐn)慎使用flip效果。
此外，你可以使用data-direction=”reverse”來(lái)設(shè)定反向的過(guò)渡效果，比如對(duì)slide效果（從右往左）使用data-direction=”reverse”則會(huì)變成從左往右，對(duì)pop效果（從小到大拋出）使用data-direction=”reverse”則會(huì)變成從大到小消失。
今天老總跟我們聊天，說(shuō)了很多技術(shù)的東西，有很多關(guān)于線(xiàn)程和內(nèi)存的內(nèi)容，憑我現(xiàn)在的水平，不理解其說(shuō)的內(nèi)容，以后要在這方面多加注意些，注重性能優(yōu)化。
在軟件行業(yè)，要實(shí)時(shí)跟上軟件發(fā)展的進(jìn)程。老總有個(gè)比喻，是這樣的。菜市場(chǎng)每天都有很多新鮮的菜進(jìn)入，如果你抱著一捆不新鮮的菜來(lái)買(mǎi)，即使你人緣再好，老主顧也會(huì)離你而去，更別說(shuō)其他。
我們使用移動(dòng)端時(shí)可以通過(guò)觸屏手勢(shì)左右滑動(dòng)來(lái)切換TAB欄目，我們說(shuō)的TAB一般由導(dǎo)航條和TAB對(duì)應(yīng)的內(nèi)容組成，切換導(dǎo)航條上的標(biāo)簽同時(shí)標(biāo)簽對(duì)應(yīng)的內(nèi)容也會(huì)跟著切換。
我們準(zhǔn)備一個(gè)TAB導(dǎo)航#pagenavi，里面包含TAB導(dǎo)航要切換的四個(gè)導(dǎo)航按鈕，然后是切換的主體內(nèi)容#slider，這里應(yīng)該放置四個(gè)li與導(dǎo)航按鈕對(duì)應(yīng)，內(nèi)容自定義。
由于是移動(dòng)端應(yīng)用，我們加載zepto.js，zepto就是體積小的jquery。然后需要加載觸屏滑動(dòng)插件touchslider.js。
接下來(lái)我們就直接調(diào)用TouchSlider，通過(guò)設(shè)置綁定tab，滑動(dòng)方向、速度、時(shí)間等信息實(shí)現(xiàn)內(nèi)容切換，請(qǐng)看詳細(xì)代碼：
script type="text/javascript"
var page='pagenavi';
var mslide='slider';
var mtitle='emtitle';
arrdiv = 'arrdiv';
var as=document.getElementById(page).getElementsByTagName('a');
var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
var as=document.getElementById(this.page).getElementsByTagName('a');
as[this.p].className='';
as[index].className='active';
this.p=index;
var txt=as[index].innerText;
$("#"+this.page).parent().find('.emtitle').text(txt);
var txturl=as[index].getAttribute('href');
var turl=txturl.split('#');
$("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);
}});
tt.page = page;
tt.p = 0;
for(var i=0;ias.length;i++){
(function(){
var j=i;
as[j].tt = tt;
as[j].onclick=function(){
this.tt.slide(j);
return false;
}
})();
}
/script
重慶分公司
重慶分公司
