以下是 jQuery不同树叶掉落特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.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=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery不同树叶掉落特效代码，属于站长常用代码" />
<title>jQuery不同树叶掉落特效</title>
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="Upper">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table style="width:600px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:70px 0 0" align="left" width="385">
<h1 style="color:#f4f2ed"></h1>
<p style="color:#d3f1a0"></p>
</td>
<td style="padding:15px 0 0" align="right" width="215">
<img src="images/Autom-Leaf.png"> </td>
</tr>
<tr>
<td style="padding:10px 0" colspan="2" align="right"></td>
</tr>
</table>
<table style="width:600px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="content" style align="left" valign="top" width="600">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:20px 0 25px 95px" align="left">
</td>
</tr>
<tr>
<td style="padding:0 0 25px 95px" valign="top">
</p>
<div align="center">
<button id="botAgregar">点击添加更多树叶</button></div>
<p></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">$.AutomLeafStart({leafsfolder:"images/",howmanyimgsare:8,initialleafs:10,maxYposition:-10,multiplyclick:true,multiplynumber:2,infinite:true,fallingsequence:4000});$("#botAgregar").on("click",function(){$.AutomLeafAdd({leafsfolder:"images/",add:8,})});</script>
<!-- 代码 结束 -->
</body>
</html>
CSS代码(lrtk.css):
/* �����������Ϫ�� www.daanxi.com */
body{margin:0;font-family:Georgia,Times,serif;background:#978f7f url('../images/bg.png');color:#edede8}
p{color:#edede8;font-weight:normal;margin:0;padding:0;line-height:20px;font-size:14px;text-shadow:-1px -1px 1px #666}
h1{color:#f4f2ed;font:normal 54px Georgia,Times,serif;margin:0;padding:0;line-height:55px;font-style:italic}
h3{color:#424242;font-weight:normal;margin:0;padding:0;line-height:26px;font-size:25px}
.title{font-size:12px;line-height:18px;color:#edede8;margin:0;padding:0;z-index:999px}
.Upper{z-index:999}
span{color:#043d18;font-weight:bold}
button{-moz-box-shadow:inset 0 1px 0 0 #caefab;-webkit-box-shadow:inset 0 1px 0 0 #caefab;box-shadow:inset 0 1px 0 0 #caefab;background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#77d42a),color-stop(1,#5cb811));background:-moz-linear-gradient(center top,#77d42a 5%,#5cb811 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a',endColorstr='#5cb811');background-color:#77d42a;-moz-border-radius:31px;-webkit-border-radius:31px;border-radius:31px;border:1px solid #268a16;display:inline-block;color:#306108;font-family:arial;font-size:15px;font-weight:bold;padding:8px 59px;text-decoration:none;text-shadow:1px 1px 0 #aade7c}
button:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#5cb811),color-stop(1,#77d42a));background:-moz-linear-gradient(center top,#5cb811 5%,#77d42a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811',endColorstr='#77d42a');background-color:#5cb811}
button:active{position:relative;top:1px}
.AutomLeaf{position:fixed;opacity:0;z-index:0}
.AutomLeaffalling{position:fixed;top:0;left:0;opacity:0;z-index:0}
.inFront{z-index:100}
.x1{width:75px;height:75px}
.x2{width:100px;height:100px}
.x3{width:125px;height:125px}
.x4{width:150px;height:150px}
分享到QQ
分享到微博
微信扫一扫
