特效描述:利用jquery实现 背景自动 切换特效。利用jquery实现背景自动切换特效
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="main.css" /> <link rel="stylesheet" type="text/css" href="bgstretcher.css" />
2. 引入JS
<script type="text/javascript" src="jquery-1.5.2.min.js"></script> <script type="text/javascript" src="bgstretcher.js"></script> <script type="text/javascript" src="main.js"></script>
3. HTML代码
<div id="page" style="display: none_;"> <div class="page-top"> </div> <div class="page-content"><div class="page-wrapper"> <h1>Background Stretcher jQuery Plugin Demo</h1> <form action="#"><div> <div class="column"> <div class="row"> <h2>Transition Effect</h2> <select id="effect"> <option value="none">None</option> <option value="fade">Fade</option> <option value="simpleSlide">Simple Slider</option> <option value="superSlide">Super Slider</option> </select> </div> <div class="row slide-directions"> <h2>Slide Direction</h2> <div class="column small"> <div class="row"><input type="radio" id="dir-n" name="direction" class="direction" checked="checked"/><label for="dir-n">North</label></div> <div class="row"><input type="radio" id="dir-s" name="direction" class="direction"/><label for="dir-s">South</label></div> <div class="row"><input type="radio" id="dir-w" name="direction" class="direction"/><label for="dir-w">West</label></div> <div class="row"><input type="radio" id="dir-e" name="direction" class="direction"/><label for="dir-e">East</label></div> </div> <div class="column small super-directions"> <div class="row"><input type="radio" id="dir-nw" name="direction" class="direction"/><label for="dir-nw">North-West</label></div> <div class="row"><input type="radio" id="dir-ne" name="direction" class="direction"/><label for="dir-ne">North-East</label></div> <div class="row"><input type="radio" id="dir-sw" name="direction" class="direction"/><label for="dir-sw">South-West</label></div> <div class="row"><input type="radio" id="dir-se" name="direction" class="direction"/><label for="dir-se">South-East</label></div> </div> </div> <div class="row"> <h2>Sequence Mode</h2> <input type="radio" id="normal" name="mode" class="mode" checked="checked"/><label for="normal">Normal</label> <input type="radio" id="back" name="mode" class="mode"/><label for="back">Back</label> <span class="mode-randome"><input type="radio" id="random" name="mode" class="mode"/><label for="random">Random</label></span> </div> </div> <div class="column"> <div class="row"> <h2>Manual Controls</h2> <div class="nav-buttons"> <a href="javascript:;" id="prev">Previouse image</a> <a href="javascript:;" id="next">Next image</a> </div> </div> <div class="row nav-buttons"> <span class="pager">Pager:</span> <div id="nav"> </div> </div> <div class="row"> <a href="javascript:;" id="toggleAnimation" >Pause Animation</a> </div> </div> </div></form> </div></div> <div class="page-bottom"> </div> </div> <div style="text-align:center;clear:both"> <br> </div>