이 기사의 예에서는 jQuery가 슬라이딩 페이지의 고정 상단 표시(표시 위치에 따라 사라지거나 교체될 수 있음)를 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
여기서 소개하는 jQuery는 페이지 상단 고정과 자동 사라지는 효과를 끌어내는 기능인데 IE 브라우저에서는 문제가 있을 수 있지만, Firefox에서 실행하면 효과를 볼 수 있는 간단한 웹페이지 특집입니다. 효과는 또한 매우 일반적으로 사용되는 "맨 위로"로 사용됩니다. "효과에 관심이 있다면 살펴보세요.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-fix-top-cha-show-codes/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>回到顶部:哭泣的小丑</title> <script src="jquery-1.6.2.min.js"></script> <!-- CSS模板清除 --> <style> html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, input,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;float:left;}select, input, button,button img, label {vertical-align: middle;}body {font:normal 12px/1.5 "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti; webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased; color:#666;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}em {font-style: normal}select, input, button, button img, label {vertical-align:middle;}input {font-family:"Microsoft Yahei","微软雅黑";webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased}input, input:focus, button, button:focus, select,textarea, textarea:focus {outline:none; -moz-outline:none; -webkit-outline:none; }input:focus { outline:none; -moz-outline:none; -webkit-outline:none; }textarea {resize:none;}a {color:#666; text-decoration:none;} a:hover {text-decoration:underline;}a:focus {outline:none; -moz-outline:none;-webkit-outline:none;}body {min-width: 960px;} </style> <!-- CSS模板清除 E--> <!-- main CSS --> <style> body{background:#e7e7e7;} .clearfix:before, .clearfix:after, .container_24:before, .container_24:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;} .clearfix:after, .container_24:after { clear: both; } .Xc_main{width:750px;margin:0 auto;position:relative;} .Xc_left{float:left;} .Xc_left h1{font-size:24px;padding-top:25px;} .Xc_right{float:right;width:600px;} .Xc_right .Xc_list{margin:10px 0 10px 0;} .Xc_list_top,.Xc_list_main{background:#fff;padding:10px;border:1px solid #ccc;} .Xc_list_top{margin-bottom:10px;} .Xc_gg{width:90px;height:90px;border:1px solid #ccc;background:#fff;text-align:center;} .Xc_bottom{height:650px;background:#fff;padding:10px;border:1px solid #ccc;position:relative;} </style> <!-- main CSS E--> </head> <script> $(function () { $(".Xc_list_top").css("width",$(".Xc_list_main").width()); var resetRightPanelPostion = function () { var msie6 = $.browser.msie && $.browser.version == '6.0' && $.browser.version < 7; if ($.browser.safari) { bodyelem = $("body"); } else { bodyelem = $("html,body"); } var bodyTop = bodyelem.scrollTop(); var top = $(".Xc_left").offset().top; //var t = $("#public_footer").offset().top; var t = $("#footerDestinationBox").offset().top; //var bottom = $("#footerDestinationBox").offset().top; for(var i = 0 ; i < $(".Xc_list .Xc_list_top").length ; i++){ if (bodyTop >= top && ((bodyTop + $(".Xc_left").outerHeight()) < t)) { if (!msie6) { if (bodyTop + $(".Xc_gg").outerHeight() >= t) { $(".Xc_gg").removeClass('fixed').css({ "position": "absolute", "top": t - $(".Xc_gg").outerHeight() + "px" }); } else { $(".Xc_gg").css({ "position": "fixed", "top": 0 }); } } } else { if (!msie6) { $(".Xc_gg").css({ "position": "static" }); } } if(bodyTop>$(".Xc_list").eq(i).offset().top){ $(".Xc_list_top").eq(i).css({position:"absolute",top:top-168}); } if(bodyTop>$(".Xc_list").eq(i).offset().top){ $(".Xc_list_top").eq(i).css({position:"fixed",top:0}); } if(bodyTop<=$(".Xc_list").eq(i).offset().top){ $(".Xc_list_top").eq(i).css({position:"static",top:0}); } } }; window.onload = function () { if ($(".Xc_gg").length) { resetRightPanelPostion(); $(window).scroll(function () { resetRightPanelPostion(); }); } } }) </script> <body> <div class="Xc_main clearfix"> <div class="clearfix" style="margin-top:90px;float:left;"> <div class="Xc_left"> <div class="Xc_gg"> <h1 id="小丑">小丑</h1> <div style="margin-top:40px;">Q群:<em style="color:#0069D6;">150508281</em></div> </div> </div> </div> <div class="Xc_right clearfix"> <div class="Xc_list"> <div class="Xc_list_top" id="Xc_list_top">top 1</div> <div class="Xc_list_main" style="height:300px;background:#fff;"> </div> </div> <div class="Xc_list"> <div class="Xc_list_top">top 2</div> <div class="Xc_list_main" style="height:300px;background:#fff;"> </div> </div> <div class="Xc_list"> <div class="Xc_list_top">top 3</div> <div class="Xc_list_main" style="height:300px;background:#fff;"> </div> </div> <div class="Xc_list"> <div class="Xc_list_top">top 4</div> <div class="Xc_list_main" style="height:300px;background:#fff;"> </div> </div> <div class="Xc_list"> <div class="Xc_list_top">top 5</div> <div class="Xc_list_main" style="height:300px;background:#fff;"> </div> </div> <div class="Xc_list"> <div class="Xc_list_top">top 6</div> <div class="Xc_list_main" style="height:300px;background:#fff;"> </div> </div> </div> </div> <div class="Xc_bottom clearfix" id="footerDestinationBox"> <div style="position:absolute;top:40px;right:50px;"> by 蓝色理想 @哭泣的小丑</div> </div> </body> </html>
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

WebStorm Mac 버전
유용한 JavaScript 개발 도구

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
