jquery滑動導(dǎo)航,jq 滑動顯示
jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實例
本文實例講述了jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊。分享給大家供大家參考。具體如下：
站在用戶的角度思考問題，與客戶深入溝通，找到華安網(wǎng)站設(shè)計與華安網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋華安地區(qū)。
運行效果圖如下：
主要代碼如下：
$(function()
{
//加載時的圖片
var
$loader=
$('#st_loading');
//獲取的ul元素
var
$list=
$('#st_nav');
//當(dāng)前顯示的圖片
var
$currImage
=
$('#st_main').children('img:first');
//加載當(dāng)前的圖片
//同時顯示導(dǎo)航的項
$('img').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出導(dǎo)航
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
//計算出將被顯示的略縮圖所在的div元素的寬度
buildThumbs();
function
buildThumbs(){
$list.children('li.album').each(function(){
var
$elem
=
$(this);
var
$thumbs_wrapper
=
$elem.find('.st_thumbs_wrapper');
var
$thumbs
=
$thumbs_wrapper.children(':first');
//每張略縮圖占有180像素的寬度和3像素的間距(margin)
var
finalW
=
$thumbs.find('img').length
*
183;
$thumbs.css('width',finalW
+
'px');
//是這元素具有滾動性
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//點擊菜單項目的時候（向上向下箭頭切換）
//使略縮圖的div層顯示和隱藏當(dāng)前的
//打開菜單（如果有的話）
$list.find('.st_arrow_down').live('click',function(){
var
$this
=
$(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var
$elem
=
$this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var
$thumbs_wrapper
=
$this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
var
$this
=
$(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//點擊略縮圖，改變大的圖片
$list.find('.st_thumbs
img').bind('click',function(){
var
$this
=
$(this);
$loader.show();
$('img
class="st_preview"/').load(function(){
var
$this
=
$(this);
var
$currImage
=
$('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//隱藏當(dāng)前已經(jīng)打開了的菜單的函數(shù)
function
hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link
span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//是當(dāng)前的略縮圖div層滾動
//當(dāng)鼠標(biāo)移至菜單層的時候會自動地進(jìn)行滾動
function
makeScrollable($outer,
$inner){
var
extra
=
800;
//獲取菜單的寬度
var
divWidth
=
$outer.width();
//移除滾動條
$outer.css({
overflow:
'hidden'
});
//查找容器上的最后一張圖片
var
lastElem
=
$inner.find('img:last');
$outer.scrollLeft(0);
//當(dāng)用戶鼠標(biāo)離開菜單的時候
$outer.unbind('mousemove').bind('mousemove',function(e){
var
containerWidth
=
lastElem[0].offsetLeft
+
lastElem.outerWidth()
+
2*extra;
var
left
=
(e.pageX
-
$outer.offset().left)
*
(containerWidth-divWidth)
/
divWidth
-
extra;
$outer.scrollLeft(left);
});
}
});
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
基于jquery的手機觸控左右滑動拖動導(dǎo)航菜單
一個簡單的解決方案：頂端固定一個DIV作為導(dǎo)航容器，該DIV左端和右端分別用DIV模擬向左和向右的按鈕，中間區(qū)域呈現(xiàn)導(dǎo)航按鈕，計算當(dāng)前位置，用模擬的按鈕控制左右滾動。
另，你說的手機端用手指滑動，在 HTML 中是由瀏覽器根據(jù)手勢觸控事件來支持的，jQuery 超越不了瀏覽器對 JS 的支持，因為 jQuery 就是 JS 的程序包。如果使用 Mouse 事件來實現(xiàn)，也不是不可以，因為手勢觸控的本質(zhì)無非還是 Mouse 事件同源的衍生計算。費老鼻子勁使用 Mouse 事假實現(xiàn)一個有加速減速效果的導(dǎo)航滑動，不經(jīng)濟。供參考。
求教jquery大神，關(guān)于手機端的導(dǎo)航手指左右滑動
寫代碼有些麻煩，給個關(guān)鍵建議。你大概是在拖動頁面上遇到麻煩吧！要實現(xiàn)在觸控設(shè)備上手指拖動元素，不能用mousemove喲，這個是沒用的，要用到touchstart(手指接觸觸摸屏)，touchmove(手指在觸摸屏上移動)，touchend(手指離開觸摸屏)。touchmove調(diào)用的函數(shù)里最好填上event.preventDefault() 否則有些瀏覽器對touchmove也不管用喲！這個還可以開發(fā)多點觸控，你自己去研究吧！
有關(guān)觸摸事件參考這里: ;uid=374119f2442b2126e94b23ef1419d180hid=6b989aa1182219e3e0883131a232b00apos=2cid=9pi=di=time=1412014181458from=clickrestype=1pagetype=0000000000000402
如何用CSS和jQuery實現(xiàn)一個側(cè)滑導(dǎo)航菜單
可以參考：
為了建立導(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)樣式，以確保我們的菜單在每個瀏覽器是一樣的。我們使用字體圖標(biāo)fontawesome來顯示菜單項向下的圖標(biāo)。我們還需要引用jQuery來實現(xiàn)菜單的切換。
面板按鈕
每個網(wǎng)站面板導(dǎo)航按鈕都類似。它往往是一個圖標(biāo)字體，如fontawesome，但在本教程中我想添加一些動畫，所以我們用橫線來實現(xiàn)?；旧?，我們的按鈕是一個跨度，包含三個div顯示為水平橫線。
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
樣式看起來如下：
.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;
}
按鈕有一個固定的位置，不動時滾動頁面。它也有一個 z-index :15的樣式，以保證它總是保持在其他重疊元素之上。按鈕由三條橫線。每橫線都有自已的樣式，我們給它加上.menu-bar樣式。類其余的樣式被移動到單獨的樣式文件中。動畫發(fā)生時，我們添加一個類.button-open。我們引用jQuery，可以比較方便的實現(xiàn)它：
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初學(xué)者可能不熟悉jQuery，讓我解釋一下這是怎么回事。首先，我們初始化一個變量稱為$togglebutton，其中包含我們的按鈕。我們將它存儲為一個變量，然后我們創(chuàng)建一個事件監(jiān)視器監(jiān)聽點擊按鈕。每單擊一次，事件監(jiān)聽器會執(zhí)行方法 function toggleclass()來切換.button-open。
.button-open我們可以用它來改變這些元素的顯示方式。我們使用CSS3 translate()和rotate()功能使頂部和底部的橫線旋轉(zhuǎn)45度，與中間的橫線逐漸消失。你可以點擊Demo中的按鈕來看看效果。
側(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ì)解釋每個風(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;
}
它的位置是固定的，所以菜單一直在同一個地方滾動。高度設(shè)為100%。注意，左邊距設(shè)置為負(fù)數(shù)，使這菜單從視圖中消失。為了讓它有一個出現(xiàn)的特效，我們用jquery來了調(diào)用另一class來顯示和關(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');
});
});
我們增加一個變量$menuwrap其中包含菜單的所有項，并使用相同的事件來創(chuàng)建按鈕。這個.menu-show的左邊距為0，并增加了一些盒子陰影效果。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}
子菜單和鏈接
你可能會注意到一個列表項的class .menu-item-has-children。包含子菜單。同時，鏈接后，有一個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 有一個::after偽元素包實現(xiàn)fontawesome箭頭。默認(rèn)情況下，子菜單是隱藏的，只有單擊父級菜單時才出現(xiàn)：
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
當(dāng)我們單擊箭頭，一個函數(shù)被調(diào)用時，它的目標(biāo)的下一個元素之后的span并使其可見。我們使用的jquery的slidetoggle。它使一個元素滑動效果的出現(xiàn)或消失，函數(shù)有一個動畫時間參數(shù)。
最后，我們的演示菜單項有一個懸停效果。它是使用一個::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;
}
這個::after偽元素包含在每個環(huán)節(jié)下絕對定位的塊級元素，隨著0.15em高度和寬度。我們不只是應(yīng)用背景顏色的線，我們使用linear-gradient() 在背景圖像功能。雖然這個功能的目的是使顏色梯度，我們可以通過指定的百分比，做了一個漸變的顏色變化。
.menu-sidebar li a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}
這里一半的線是透明的，另一半是黃色的。通過背景大小200%的寬度，使透明部分占用的所有鏈接的寬度。
jquery mobile如何通過左右滑動切換導(dǎo)航欄
jquerymobile達(dá)不到那個理想的劃動的 效果。我想你肯定想是跟著手指劃動的切換 。
jquerymobile只能是判斷向左還是向右劃動來執(zhí)行pagechage操作。
$("#標(biāo)簽").bind("swipeleft",function(){????
$.mobile.changePage("#home");????
});
swipeleft和 swiperight
jquery怎么做導(dǎo)航條隨滾動條的滾動而滾動，不是固定的那種。
這個用CSS讓導(dǎo)航固定就可以了，
#qq {
position:fixed; /* 固定位置 ie6不支持該屬性 */
top:0; /* 導(dǎo)航欄距離頂端為0像素 */
/*ie6下樣式，加下劃線表示只針對ie6 的hack (可百度 css hack百度百科)*/
_position:absolute; /* 把導(dǎo)航欄位置定義為絕對位置，這句是關(guān)鍵1 */
_top:expression(eval(document.documentElement.scrollTop)); /* 把導(dǎo)航欄位置放在瀏覽器垂直滾動條的頂端，這句是關(guān)鍵2 */
overflow:auto;
z-index:9999; /* 讓導(dǎo)航欄浮在網(wǎng)頁的高層位置，遇到flash和圖片時候也能始終保持最外層 */
}
*/
分享標(biāo)題：jquery滑動導(dǎo)航,jq 滑動顯示
文章源于：http://m.jiaotiyi.com/article/dsihehc.html