jquery背景自动切换特效
2014-01-19 22:46
573 查看
查看效果网址:
http://keleyi.com/a/bjad/4kwkql05.htm
本特效的jquery版本只支持1.9.0以下。
代码如下:
web前端:/article/4797642.html
http://keleyi.com/a/bjad/4kwkql05.htm
本特效的jquery版本只支持1.9.0以下。
代码如下:
<!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 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> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <a herf="http://keleyi.com/a/bjad/4kwkql05.htm">原文</a></p> </div> </body> </html>
web前端:/article/4797642.html
相关文章推荐
- 用jquery仿做发微博功能
- jquery对象互转DOM对象方式
- jQuery 对象与 DOM 对象的转换
- jQuery
- [转载]jquery ajax/post/get 传参数给 mvc的action
- JQuery实现的行列冻结表格
- jquery评分插件
- Jquery中$.ajax()方法应用笔记
- 【Jquery】之事件
- 【Jquery】之选择器
- Jquery 与Ext的区别和各自适用项目类型
- jQuery 到顶部
- jQuery UI MultiSelect Widget使用实现步骤
- JQuery 快速入门一篇通
- 解决问题的jquery函数
- jQuery-强大的jQuery选择器 (详解)
- jQuery Tags Input Plugin(添加/删除标签插件)
- Jquery 中toggle的用法举例
- jQuery 常用技术点--入门,异步交互
- jquery.fn.extend与jquery.extend(转)