Heim > Artikel > Web-Frontend > 基于Jquery实现万圣节快乐特效_jquery
基于Jquery实现万圣节快乐特效_jquery
- WBOYOriginal
- 2016-05-16 15:34:251692Durchsuche
效果展示图如下所示：
点击此处查看效果图：
http://keleyi.com/keleyi/phtml/jqtexiao/6.htm
以下为HTML代码：
<!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>
以上代码是不是很简单啊，基于Jquery实现万圣节快乐特效教程就到此结束了，参考以上内容，小伙伴们也来娱乐娱乐吧。
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实现点击获取验证码倒计时效果_javascript技巧Nächster Artikel：JavaScript操作XML/HTML比较常用的对象属性集锦_javascript技巧