可以自定义多种方式自动更换网页背景图片的jQuery插件bgstretcher.js.zip资源-CSDN文库

共16个文件

jpg：6个

png：3个

js：3个

版权申诉

前端代码

54 浏览量 2022-11-11 00:23:50 上传评论收藏 358KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

可以自定义多种方式自动更换网页背景图片的jQuery插件bgstretcher.js.zip （16个子文件）

132689879077107763

bgstretcher.css 655B

jquery-1.5.2.min.js 84KB

demo

images

sample-2.jpg 70KB

sample-1.jpg 54KB

page-top.png 631B

page-bottom.png 628B

page-bg.png 193B

sample-3.jpg 60KB

sample-4.jpg 55KB

sample-6.jpg 67KB

sample-5.jpg 66KB

index.html 5KB

flash

stars.swf 5KB

main.js 4KB

main.css 2KB

bgstretcher.js 21KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="JS代码,bgstretcher.js,背景切换,图片切换,sharejs.com,jQuery插件" /> <meta name="description" content="可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，更多bgstretcher.js,sharejs.com,背景切换,图片切换,jQuery插件请访问脚本之家JS代码频道。" /> <title>可以自动动态更换网页背景图片的jQuery插件bgstretcher.js_脚本之家</title> <link rel="stylesheet" type="text/css" href="./main.css" /> <link rel="stylesheet" type="text/css" href="../bgstretcher.css" /> <script type="text/javascript" src="../jquery-1.5.2.min.js"></script> <script type="text/javascript" src="../swfobject.js"></script> <script type="text/javascript" src="../bgstretcher.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Initialize Backgound Stretcher $('BODY').bgStretcher({ images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', '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="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="http://www.sharejs.com"><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><a href="http://www.jb51.net">Slide Direction</a></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"> <p>来源：<a href="http://www.jb51.net" target="_blank">ajaxblender</a>　代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a>　感谢：<a href="http://www.jb51.net" target="_blank">heixin</a></p> <p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉