jquery手機觸屏左右滑動切換欄目
專業(yè)領域包括網(wǎng)站設計、成都網(wǎng)站設計、商城開發(fā)、微信營銷、系統(tǒng)平臺開發(fā), 與其他網(wǎng)站設計及系統(tǒng)開發(fā)公司不同,成都創(chuàng)新互聯(lián)的整合解決方案結合了幫做網(wǎng)絡品牌建設經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念,并將策略和執(zhí)行緊密結合,為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。
$(function(){
TouchSlide({
slideCell:"#slideBox",
titCell:".myhd
ul",
//開啟自動分頁
autoPage:true
,此時設置
titCell
為導航元素包裹層
mainCell:".bd
ul",
effect:"leftLoop",
autoPage:true,//自動分頁
autoPlay:true
//自動播放
});
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="#"日右翼游行紀念釣島"國有化"周年/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news3.jpg"http://a
a
class="tit"
href="#"女兵競選美國小姐鼓勵女性自強/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news4.jpg"http://a
a
class="tit"
href="#"濟南現(xiàn)“最窄人行道”
僅0.2米寬/a
/li
/ul
/div
div
class="myhd"
ul
style="height:
28px;"/ul
/div
/div
1.返回值:jQueryfadeIn([speed],[easing],[fn])
fadeOut([speed],[eas],[fn]);
speed:三種預定速度之一的字符串("slow","normal", or
"fast")或表示動畫時長的毫秒數(shù)值 (如: 1000)
easing:(Optional) 用來指定切換效果,默認是"swing",可用參數(shù)"linear"
fn:在動畫完成時執(zhí)行的函數(shù),每個元素執(zhí)行一次。
2. 樓主上面的圖片輪播(slide),想必用的是別人封裝的插件吧。如果是插件的話,只能是別人傳遞的參數(shù)得知的情況下再設置了。
這個代碼我寫過,不過實現(xiàn)的不完美,現(xiàn)在沒時間寫,留著明天再給你發(fā)
#section5,
#section5 .fp-slide,
#section5 .fp-tableCell,
footer,
footer .fp-slide,
footer .fp-tableCell
{
height: auto !important;
}
這個是頁面高度根據(jù)內(nèi)容高度變化的,
autoScrolling:false, 這個是關閉自動滾一整屏的。
本文實例講述了jQuery實現(xiàn)帶滾動導航效果的全屏滾動相冊。分享給大家供大家參考。具體如下:
運行效果圖如下:
主要代碼如下:
$(function()
{
//加載時的圖片
var
$loader=
$('#st_loading');
//獲取的ul元素
var
$list=
$('#st_nav');
//當前顯示的圖片
var
$currImage
=
$('#st_main').children('img:first');
//加載當前的圖片
//同時顯示導航的項
$('img').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出導航
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層顯示和隱藏當前的
//打開菜單(如果有的話)
$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'});
});
//隱藏當前已經(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');
}
//是當前的略縮圖div層滾動
//當鼠標移至菜單層的時候會自動地進行滾動
function
makeScrollable($outer,
$inner){
var
extra
=
800;
//獲取菜單的寬度
var
divWidth
=
$outer.width();
//移除滾動條
$outer.css({
overflow:
'hidden'
});
//查找容器上的最后一張圖片
var
lastElem
=
$inner.find('img:last');
$outer.scrollLeft(0);
//當用戶鼠標離開菜單的時候
$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程序設計有所幫助。
通過CSS把容器的滾動條隱藏即可
例如一般都是窗口出現(xiàn)滾動條:
body?{
overflow-x:hidden;
}
標題名稱:jquery滾動切換,jquery左右滑動
文章路徑:http://muchs.cn/article22/pheijc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設計、外貿(mào)網(wǎng)站建設、標簽優(yōu)化、商城網(wǎng)站、網(wǎng)站維護、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)