Home  >  Article  >  Web Front-end  >  Implementing Happy Halloween special effects based on Jquery_jquery

Implementing Happy Halloween special effects based on Jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:34:251741browse

The effect display picture is as follows:

Click here to view the rendering:

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

The following is the 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>

Isn’t the above code very simple? This is the end of the tutorial on implementing Happy Halloween special effects based on Jquery. Refer to the above content and let’s have some fun, friends.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn