資訊專欄INFORMATION COLUMN
摘要：點擊切換沒有懶導(dǎo)航滾動到指定位置后懸浮沒有沒有懶導(dǎo)航名字導(dǎo)航置頂后的改變樣式的名字導(dǎo)航不改變可以刪掉該行導(dǎo)航置頂后的改變樣式的名字導(dǎo)航不改變可以刪掉該行點擊按鈕顯示隱藏點擊別處隱藏點擊浮層不動
table 點擊切換
/* JQ */
$(".sideslip-head>li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
$(".sideslip-titles").eq($(this).index()).css("display","block").siblings().css("display","none")
})
導(dǎo)航 滾動到指定位置后 懸浮
/*
沒有css
沒有html
懶...
*/
/* JQ */
$(window).scroll(function(){
var bignav = $(".導(dǎo)航名字");
if( $(this).scrollTop() >195){
bignav.addClass("導(dǎo)航置頂后的改變樣式 的名字"); // 導(dǎo)航css不改變 可以刪掉該行
bignav.css({
width:"100%",
position:"fixed",
top:50,
zIndex:10
});
}
else{
bignav.removeClass("導(dǎo)航置頂后的改變樣式 的名字"); // 導(dǎo)航css不改變 可以刪掉該行
bignav.css("position","static");
}
});
點擊按鈕顯示/ 隱藏 點擊別處隱藏 點擊浮層不動
/* css */
.wrapper{
position:relative;
display:inline-block;
}
.popover{
display: none;
border:1px solid red;
position:absolute;
left:50px;
top:0;
white-space:nowrap;
padding:10px;
margin-left:10px;
background: white;
}
.popover::before{
position:absolute;
right:100%;
top:0;
border: 10px solid transparent;
border-right-color:red;
content:"";
}
.popover::after{
position: absolute;
right:100%;
top:0;
border:10px solid transparent;
border-right-color: white;
}
浮層
//jq 方法1：點擊自身能隱藏 其余功能 和方法2 一樣
$(clickMe).on("click",function (ev) {
ev.stopPropagation();
$(popover).slideToggle(); //slideToggle 這個可換
var flag = true;
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest($(clickMe)).length == 0 && flag == true){
$(popover).slideUp();
flag = false;
}
});
});
//jq 方法2：點擊自身不不不不不不不能隱藏 其余功能 和方法1 一樣
$(clickMe).on("click",function () {
$(popover).show()
$(document).one("click",function(){
console.log("document")
$(popover).hide()
})
})
$(wrapper).on("click",function(e){
e.stopPropagation()
})
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103178.html
摘要：簡介前端發(fā)展迅速，開發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫框架工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫在滿足自己開發(fā)需求的基礎(chǔ)上，然后最好可以對源碼進(jìn)行調(diào)研，了解和深入實現(xiàn)原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...
1、前言 很久沒有發(fā)布文章啦，終于今天有點時間，就在上班前把我之前所寫的為了學(xué)習(xí)JS基礎(chǔ)編寫的一些使用JS實現(xiàn)的網(wǎng)頁常用特效分享給大家；相關(guān)的代碼我之后也會放到GitHub上，歡迎大家star； 2、JS實現(xiàn)特效的概念 JS實現(xiàn)網(wǎng)頁特效，其實通俗的說就是通過JS動態(tài)地控制css樣式，以達(dá)到實現(xiàn)動畫的效果；（很多動畫特效都可以由css3實現(xiàn)，個人推薦是能用css3就用css3；這里用Js的目的我前面...
1、前言 很久沒有發(fā)布文章啦，終于今天有點時間，就在上班前把我之前所寫的為了學(xué)習(xí)JS基礎(chǔ)編寫的一些使用JS實現(xiàn)的網(wǎng)頁常用特效分享給大家；相關(guān)的代碼我之后也會放到GitHub上，歡迎大家star； 2、JS實現(xiàn)特效的概念 JS實現(xiàn)網(wǎng)頁特效，其實通俗的說就是通過JS動態(tài)地控制css樣式，以達(dá)到實現(xiàn)動畫的效果；（很多動畫特效都可以由css3實現(xiàn)，個人推薦是能用css3就用css3；這里用Js的目的我前面...
1、前言 很久沒有發(fā)布文章啦，終于今天有點時間，就在上班前把我之前所寫的為了學(xué)習(xí)JS基礎(chǔ)編寫的一些使用JS實現(xiàn)的網(wǎng)頁常用特效分享給大家；相關(guān)的代碼我之后也會放到GitHub上，歡迎大家star； 2、JS實現(xiàn)特效的概念 JS實現(xiàn)網(wǎng)頁特效，其實通俗的說就是通過JS動態(tài)地控制css樣式，以達(dá)到實現(xiàn)動畫的效果；（很多動畫特效都可以由css3實現(xiàn)，個人推薦是能用css3就用css3；這里用Js的目的我前面...
閱讀 2737·2021-11-24 09:39
閱讀 1741·2021-11-24 09:38
閱讀 686·2021-11-22 14:44
閱讀 1968·2021-11-18 10:02
閱讀 2867·2021-11-18 10:02
閱讀 1223·2021-10-14 09:43
閱讀 4424·2021-09-29 09:35
閱讀 625·2021-07-30 15:30
