那一抹温暖的阳光,是我们永恒的向往。
www.webbar.cn

jquery背景自动切换特效

jquery背景自动切换特效

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>jquery背景自动切换特效-柯乐义</title>
<link rel=”stylesheet” type=”text/css” href=”http://keleyi.com/keleyi/phtml/jqplug/9/main.css” />
<link rel=”stylesheet” type=”text/css” href=”http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.css” />
<script src=”http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

// Initialize Backgound Stretcher
$(‘BODY’).bgStretcher({
images: [‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-1.jpg’
, ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-2.jpg’
, ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-3.jpg’
, ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-4.jpg’
, ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-5.jpg’
, ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-6.jpg’],
imageWidth: 1024,
imageHeight: 768,
slideDirection: ‘N’,
slideShowSpeed: 1000,
transitionEffect: ‘fade’,
sequenceMode: ‘normal’,
buttonPrev: ‘#prev’,
buttonNext: ‘#next’,
pagination: ‘#nav’,
anchoring: ‘left center’,
anchoringImg: ‘left center’
});

});
</script>

<script type=”text/javascript” src=”http://keleyi.com/keleyi/phtml/jqplug/9/main.js”></script>

</head>
<body>
<div id=”page” style=”display: none_;”>
<div> </div>
<div><div>
<h1>背景图片自动切换·柯乐义·Background Stretcher jQuery Plugin Demo</h1>

<form action=”#”><div>
<div>
<div>
<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>
<h2>Slide Direction</h2>
<div>
<div ><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>
<div ><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>
<h2>Sequence Mode</h2>
<input type=”radio” id=”normal” name=”mode” checked=”checked”/><label for=”normal”>Normal</label>
<input type=”radio” id=”back” name=”mode”/><label for=”back”>Back</label>
<span ><input type=”radio” id=”random” name=”mode” class=”mode”/><label for=”random”>Random</label></span>
</div>
</div>
<div>
<div>
<h2>Manual Controls</h2>
<div>
<a href=”javascript:;” id=”prev”>Previouse image</a>
<a href=”javascript:;” id=”next”>Next image</a>
</div>
</div>
<div>
<span>Pager:</span> <div id=”nav”> </div>
</div>
<div>
<a href=”javascript:;” id=”toggleAnimation” >Pause Animation</a>
</div>
</div>
</div></form>
</div></div>
<div> </div>
</div>
<div style=”text-align:center;clear:both”>

<br>
<p> 适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <a herf=”http://keleyi.com/a/bjad/4kwkql05.htm”>原文</a></p>
</div>

</body>
</html>

 

时间:2014-01-21

Comments are closed.

Search