suchen

Heim >Web-Frontend >js-Tutorial >Dynamischer Return-to-Top-Spezialeffektcode, implementiert von jquery_jquery

Dynamischer Return-to-Top-Spezialeffektcode, implementiert von jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:34:541620Durchsuche

Das Beispiel in diesem Artikel beschreibt den dynamischen Back-to-Top-Spezialeffektcode, der von jquery implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dieser dynamische JQuery-Return-to-Top-Effekt führt nicht auf einmal zum Anfang der Webseite, sondern hat einen Puffereffekt und einen Animationseffekt. Dies ist eine sehr häufig verwendete Webseite Spezialeffekt. Ich hoffe, es gefällt dir.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态回到顶部特效</title>
</head>
<body>
<style>
#goTopBtn {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px;cursor:pointer;display:none;
background:url(images/back_to_top_white.gif);}
</style>
<br/>
<p style="text-align:center;font-family:Georgia, 'Times New Roman', Times, serif;font-size:24px;font-weight:bold;">***，how are you。
<br/>Just do what you want do!!!</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="goTopBtn"></div>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(window).scroll(function(){
   var sc=$(window).scrollTop();
   var rwidth=$(window).width()
   if(sc>0){
    $("#goTopBtn").css("display","block");
    $("#goTopBtn").css("left",(rwidth-36)+"px")
   }else{
   $("#goTopBtn").css("display","none");
   }
 })
 $("#goTopBtn").click(function(){
   var sc=$(window).scrollTop();
   $('body,html').animate({scrollTop:0},500);
 })
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie Python-Codebeispiele, um die praktische Anwendung des kNN-Algorithmus zu demonstrieren_GrundkenntnisseNächster Artikel：Verwenden Sie Python-Codebeispiele, um die praktische Anwendung des kNN-Algorithmus zu demonstrieren_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen