思路：鼠標(biāo)下滾動(dòng)時(shí)頂部不顯示，上滾動(dòng)時(shí)導(dǎo)航顯示
10年積累的成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有青白江免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
CSS:
body{background-color:white;?padding-top:10px;?font:100?14px?'Open?Sans'}
#lipsum{width:690px;?margin:30px?auto;?color:#34495e;text-align:justify;height:10000px;}
/*給DIV?一個(gè)固定高度顯示滾動(dòng)條*/
img{float:left;?margin:0?10px?10px?0;}
.yapiskan{
background-color:#e74c3c;?
color:white;?
font-size:24px;?
padding:5px;?
text-align:center;?
position:?fixed;?
left:0;?
top:0;?
width:100%;?
transition:?top?.5s;
}
.gizle?{
top:?-90px;
}
.sabit?{
top:0;
z-index:?9999;
}
結(jié)構(gòu)：
!DOCTYPE?html
html
head
meta?charset="UTF-8"
titleYukar#305;?Scroll?Edildi#287;inde?G#246;züken?Header?-?CodePen/title
link?rel="stylesheet"?href="css/style.css"?media="screen"?type="text/css"?/
/head
body
header?class="yapiskan"STICKY?HEADER/header
div?id="lipsum"
/div
script?src="http://此處引入JQ"/script
script?src="http://此處引入js"/script
/body
/html
//JS部分
$(function(){
var?cubuk_seviye?=?$(document).scrollTop();
var?header_yuksekligi?=?$('.yapiskan').outerHeight();
//卷動(dòng)事件
$(window).scroll(function()?{
//卷動(dòng)高度
var?kaydirma_cubugu?=?$(document).scrollTop();
//上滾動(dòng)顯示導(dǎo)航
if?(kaydirma_cubugu??header_yuksekligi){$('.yapiskan').addClass('gizle');}?
else?{$('.yapiskan').removeClass('gizle');}
//下滾動(dòng)隱藏導(dǎo)航
if?(kaydirma_cubugu??cubuk_seviye){$('.yapiskan').removeClass('sabit');}?
else?{$('.yapiskan').addClass('sabit');}
cubuk_seviye?=?$(document).scrollTop();
});
});
jquery操作復(fù)選框(checkbox)的12個(gè)小技巧。
1、獲取單個(gè)checkbox選中項(xiàng)(三種寫(xiě)法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2、 獲取多個(gè)checkbox選中項(xiàng)
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3、設(shè)置第一個(gè)checkbox 為選中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4、設(shè)置最后一個(gè)checkbox為選中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5、根據(jù)索引值設(shè)置任意一個(gè)checkbox為選中值
$('input:checkbox).eq(索引值).attr('checked', 'true');
索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6、選中多個(gè)checkbox同時(shí)選中第1個(gè)和第2個(gè)的checkbox
$('input:radio').slice(0,2).attr('checked','true');
7、根據(jù)Value值設(shè)置checkbox為選中值
$("input:checkbox[value='1']").attr('checked','true');
8、刪除Value=1的checkbox
$("input:checkbox[value='1']").remove();
9、刪除第幾個(gè)checkbox
$("input:checkbox").eq(索引值).remove();
索引值=0,1,2....
如刪除第3個(gè)checkbox:
$("input:checkbox").eq(2).remove();
10、遍歷checkbox
$('input:checkbox').each(function (index, domEle) {
//寫(xiě)入代碼
});
11、全部選中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
12、全部取消選擇
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});
JQuery對(duì)CheckBox的一些相關(guān)操作
一、通過(guò)選擇器選取CheckBox:
1.給CheckBox設(shè)置一個(gè)id屬性，通過(guò)id選擇器選?。?/p>
input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" /
JQuery:
$("#chkOne").click(function(){});
2.給CheckBox設(shè)置一個(gè)class屬性，通過(guò)類(lèi)選擇器選?。?/p>
input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" /
JQuery:
$(".chkTwo").click(function(){});
3.通過(guò)標(biāo)簽選擇器和屬性選擇器來(lái)選取：
input type="checkbox" name="someBox" value="1" checked="checked" /
input type="checkbox" name="someBox" value="2" /
JQuery:
$("input[name='someBox']").click(function(){});
二、對(duì)CheckBox的操作：
以這段checkBox代碼為例：
input type="checkbox" name="box" value="0" checked="checked" /
input type="checkbox" name="box" value="1" /
input type="checkbox" name="box" value="2" /
input type="checkbox" name="box" value="3" /
1.遍歷checkbox用each()方法：
$("input[name='box']").each(function(){});
2.設(shè)置checkbox被選中用attr();方法：
$("input[name='box']").attr("checked","checked");
在HTML中，如果一個(gè)復(fù)選框被選中，對(duì)應(yīng)的標(biāo)記為 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 則會(huì)提示您是"true"而不是"checked"，所以判斷 if("checked"==$("#id").attr("checked")) 是錯(cuò)誤的，應(yīng)該是 if(true == $("#id").attr("checked"))
3.獲取被選中的checkbox的值：
$("input[name='box'][checked]").each(function(){
if (true == $(this).attr("checked")) {
alert( $(this).attr('value') );
}
或者：
$("input[name='box']：checked").each(function(){
if (true == $(this).attr("checked")) {
alert( $(this).attr('value') );
}
$("input[name='box']：checked")與 $("input[name='box']")有何區(qū)別沒(méi)試過(guò)，我試了用 $("input[name='box']")能成功。
4.獲取未選中的checkbox的值：
$("input[name='box']").each(function(){
if ($(this).attr('checked') ==false) {
alert($(this).val());
}
});
5.設(shè)置checkbox的value屬性的值:
$(this).attr("value",值);
三、 一般都是創(chuàng)建一個(gè)js數(shù)組來(lái)存儲(chǔ)遍歷checkbox得到的值，創(chuàng)建js數(shù)組的方法：
1. var array= new Array();
2. 往數(shù)組添加數(shù)據(jù)：
array.push($(this).val());
3.數(shù)組以“,”分隔輸出：
alert(array.join(','));
script?type="text/javascript"?src=""/script
script
(function()?{
new?Headroom(document.querySelector("#nav-scroll"),?{?//這里的nav-scroll改為你的導(dǎo)航欄的id或class
offset?:?5,?//?在元素沒(méi)有固定之前，垂直方向的偏移量（以px為單位）
tolerance:?5,?//?scroll?tolerance?in?px?before?state?changes????????
classes:?{
initial:?"animated",??//?當(dāng)元素初始化后所設(shè)置的class
pinned:?"slideUp",?//?向上滾動(dòng)時(shí)設(shè)置的class
unpinned:?"slideDown"?//?向下滾動(dòng)時(shí)所設(shè)置的class
}
}).init();????
}());
/script
然后，加上樣式就可以了：
.animated?{position:?fixed;top:?0;left:?0;right:?0;transition:?all?.2s?ease-in-out;}
.animated?.slideDown?{top:?-100px;}
.animated?.slideUp?{top:?0;}
本文實(shí)例講述了jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)。分享給大家供大家參考。具體如下：
運(yùn)行效果圖如下：
主要代碼如下：
$(function()
{
//加載時(shí)的圖片
var
$loader=
$('#st_loading');
//獲取的ul元素
var
$list=
$('#st_nav');
//當(dāng)前顯示的圖片
var
$currImage
=
$('#st_main').children('img:first');
//加載當(dāng)前的圖片
//同時(shí)顯示導(dǎo)航的項(xiàng)
$('img').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出導(dǎo)航
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
//計(jì)算出將被顯示的略縮圖所在的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');
//是這元素具有滾動(dòng)性
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//點(diǎn)擊菜單項(xiàng)目的時(shí)候（向上向下箭頭切換）
//使略縮圖的div層顯示和隱藏當(dāng)前的
//打開(kāi)菜單（如果有的話）
$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();
});
//點(diǎn)擊略縮圖，改變大的圖片
$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)打開(kāi)了的菜單的函數(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)
//當(dāng)鼠標(biāo)移至菜單層的時(shí)候會(huì)自動(dòng)地進(jìn)行滾動(dòng)
function
makeScrollable($outer,
$inner){
var
extra
=
800;
//獲取菜單的寬度
var
divWidth
=
$outer.width();
//移除滾動(dòng)條
$outer.css({
overflow:
'hidden'
});
//查找容器上的最后一張圖片
var
lastElem
=
$inner.find('img:last');
$outer.scrollLeft(0);
//當(dāng)用戶鼠標(biāo)離開(kāi)菜單的時(shí)候
$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);
});
}
});
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
重慶分公司
重慶分公司
