Heim > Artikel > Web-Frontend > jQuery implementiert die Funktion zum Korrigieren der oberen Anzeige der Schiebeseite
jQuery implementiert die Funktion zum Korrigieren der oberen Anzeige der Schiebeseite
- 不言Original
- 2018-06-25 14:40:481561Durchsuche
In diesem Artikel wird hauptsächlich jQuery vorgestellt, um die feste obere Anzeige der Schiebeseite zu realisieren. Es kann auch das entsprechende aktuelle Anzeigeelement entsprechend der Anzeigeposition ersetzen. Es hat einen bestimmten Referenzwert
Das Beispiel beschreibt jQuerys Implementierung einer festen oberen Anzeige auf einer verschiebbaren Seite (die je nach Anzeigeposition verschwinden und ersetzt werden kann). Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Die hier vorgestellte jQuery-Pull-Seite weist eine feste Top-Anzeige und einen automatischen Verschwindungseffekt auf. Möglicherweise liegt ein Problem mit dem IE-Browser vor, aber es kann sein Führen Sie es auf Firefox oder einem anderen Anbieter aus, um den Effekt zu sehen. Ein einfacher Webseiten-Spezialeffekt, auch ein sehr häufig verwendeter „Zurück zum Anfang“-Effekt. Schauen Sie sich diesen an, wenn Sie interessiert sind.
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<!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, p, 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>
<p class="Xc_main clearfix">
<p class="clearfix" style="margin-top:90px;float:left;">
<p class="Xc_left">
<p class="Xc_gg">
<h1>小丑</h1>
<p style="margin-top:40px;">Q群:<em style="color:#0069D6;">150508281</em></p>
</p>
</p>
</p>
<p class="Xc_right clearfix">
<p class="Xc_list">
<p class="Xc_list_top" id="Xc_list_top">top 1</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 2</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 3</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 4</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 5</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 6</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
</p>
</p>
<p class="Xc_bottom clearfix" id="footerDestinationBox">
<p style="position:absolute;top:40px;right:50px;"> by 蓝色理想 @哭泣的小丑</p>
</p>
</body>
</html>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Über das jQuery-Plug-in Timelinr zum Implementieren von Timeline-Effekten
JS zum Implementieren des Löschens beim Schieben links auf dem mobilen Endgerät Tastenfunktion
Das obige ist der detaillierte Inhalt vonjQuery implementiert die Funktion zum Korrigieren der oberen Anzeige der Schiebeseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!