suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung von Happy Halloween-Spezialeffekten basierend auf Jquery_jquery

Implementierung von Happy Halloween-Spezialeffekten basierend auf Jquery_jquery

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

Das Effektanzeigebild sieht wie folgt aus:

Klicken Sie hier, um das Rendering anzuzeigen:

http://keleyi.com/keleyi/phtml/jqtexiao/6.htm

Das Folgende ist der HTML-Code: 

<!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>万圣节快乐！！-柯乐义</title>
<style type="text/css">
body{margin:0px;background-image:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/Halloween2013_Keleyi.jpg); background-repeat:no-repeat;background-color:#030303;background-position:center top;}
.animate
{
margin-top:600px;
height:130px;
width:620px;
margin-left:auto;
margin-right:auto;
background:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/keleyighost.gif) no-repeat;
background-position:-280px center;
}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function guitiao() {
$("div#animate_kel"+"eyi_com").css({backgroundPosition:'-280px center'});
$("div#animate_ke"+"leyi_com").animate({ backgroundPosition: "620" },20232,guitiao); 
});
</script>
</head>
<body>
<div id="animate_keleyi_com" class="animate">
</div>
<div><a href="http://keleyi.com/a/bjac/438uwrmi.htm" target="_blank">原文</a></div>
</body>
</html>

Ist der obige Code nicht sehr einfach? Dies ist das Ende des Tutorials zur Implementierung von Happy Halloween-Spezialeffekten basierend auf Jquery. Schauen Sie sich den obigen Inhalt an und lassen Sie uns etwas Spaß haben.

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：js erkennt den Countdown-Effekt des Klickens, um die Fähigkeiten zum Verifizierungscode_javascript zu erhaltenNächster Artikel：js erkennt den Countdown-Effekt des Klickens, um die Fähigkeiten zum Verifizierungscode_javascript zu erhalten

In Verbindung stehende Artikel

Mehr sehen