jquery背景自动切换特效
查看效果网址:
http://keleyi.com/a/bjad/4kwkql05.htm
本特效的jquery版本只支持1.9.0以下。
代码如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>jquery背景自动切换特效-柯乐义</title> 6 <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqplug/9/main.css" /> 7 <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.css" /> 8 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script> 9 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.js"></script> 10 <script type="text/javascript"> 11 $(document).ready(function(){ 12 13 // Initialize Backgound Stretcher 14 $('BODY').bgStretcher({ 15 images: ['http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-1.jpg' 16 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-2.jpg' 17 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-3.jpg' 18 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-4.jpg' 19 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-5.jpg' 20 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-6.jpg'], 21 imageWidth: 1024, 22 imageHeight: 768, 23 slideDirection: 'N', 24 slideShowSpeed: 1000, 25 transitionEffect: 'fade', 26 sequenceMode: 'normal', 27 buttonPrev: '#prev', 28 buttonNext: '#next', 29 pagination: '#nav', 30 anchoring: 'left center', 31 anchoringImg: 'left center' 32 }); 33 34 }); 35 </script> 36 37 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/main.js"></script> 38 39 </head> 40 <body> 41 <div id="page" style="display: none_;"> 42 <div class="page-top"> </div> 43 <div class="page-content"><div class="page-wrapper"> 44 <h1>背景图片自动切换·柯乐义·Background Stretcher jQuery Plugin Demo</h1> 45 46 <form action="#"><div> 47 <div class="column"> 48 <div class="row"> 49 <h2>Transition Effect</h2> 50 <select id="effect"> 51 <option value="none">None</option> 52 <option value="fade">Fade</option> 53 <option value="simpleSlide">Simple Slider</option> 54 <option value="superSlide">Super Slider</option> 55 </select> 56 </div> 57 <div class="row slide-directions"> 58 <h2>Slide Direction</h2> 59 <div class="column small"> 60 <div class="row"><input type="radio" id="dir-n" name="direction" class="direction" checked="checked"/><label for="dir-n">North</label></div> 61 <div class="row"><input type="radio" id="dir-s" name="direction" class="direction"/><label for="dir-s">South</label></div> 62 <div class="row"><input type="radio" id="dir-w" name="direction" class="direction"/><label for="dir-w">West</label></div> 63 <div class="row"><input type="radio" id="dir-e" name="direction" class="direction"/><label for="dir-e">East</label></div> 64 </div> 65 <div class="column small super-directions"> 66 <div class="row"><input type="radio" id="dir-nw" name="direction" class="direction"/><label for="dir-nw">North-West</label></div> 67 <div class="row"><input type="radio" id="dir-ne" name="direction" class="direction"/><label for="dir-ne">North-East</label></div> 68 <div class="row"><input type="radio" id="dir-sw" name="direction" class="direction"/><label for="dir-sw">South-West</label></div> 69 <div class="row"><input type="radio" id="dir-se" name="direction" class="direction"/><label for="dir-se">South-East</label></div> 70 </div> 71 </div> 72 <div class="row"> 73 <h2>Sequence Mode</h2> 74 <input type="radio" id="normal" name="mode" class="mode" checked="checked"/><label for="normal">Normal</label> 75 <input type="radio" id="back" name="mode" class="mode"/><label for="back">Back</label> 76 <span class="mode-randome"><input type="radio" id="random" name="mode" class="mode"/><label for="random">Random</label></span> 77 </div> 78 </div> 79 <div class="column"> 80 <div class="row"> 81 <h2>Manual Controls</h2> 82 <div class="nav-buttons"> 83 <a href="javascript:;" id="prev">Previouse image</a> 84 <a href="javascript:;" id="next">Next image</a> 85 </div> 86 </div> 87 <div class="row nav-buttons"> 88 <span class="pager">Pager:</span> <div id="nav"> </div> 89 </div> 90 <div class="row"> 91 <a href="javascript:;" id="toggleAnimation" >Pause Animation</a> 92 </div> 93 </div> 94 </div></form> 95 </div></div> 96 <div class="page-bottom"> </div> 97 </div> 98 <div style="text-align:center;clear:both"> 99 100 <br> 101 <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <a herf="http://keleyi.com/a/bjad/4kwkql05.htm">原文</a></p> 102 </div> 103 104 </body> 105 </html>
web前端:http://www.cnblogs.com/jihua/p/webfront.html
jquery背景自动切换特效相关推荐
- jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
- html5 背景图片自动换,网站背景图片自动切换特效css代码
背景图片自动切换特效-sbkko.com body { background: #000; background-attachment: fixed; word-wrap: break-word; - ...
- css背景随机,CSS3随机背景图片切换特效
css3的随机背景图片淡入淡出切换特效 演示效果如本篇文章背景所示 看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来 设计之初本来是打算使用jQuery进行实现的,但 ...
- 七牛云这个API,让我轻松搞定Banner背景自动切换的功能
一.背景概述 我是谁?我是一名前端攻城狮,这周刚到公司不久,我司的产品经理就跑到我面前说:"浪哥,昨晚我看到某 APP 首页 Banner 切换时,Banner 区域的背景色会跟随 Bann ...
- php背景自动切换图片,威联通NAS自动更换背景图片
威联通NAS自动更换背景图片 2019-12-23 13:45:38 0点赞 5收藏 0评论 如何才能快速换一种生活方式?参加#牛年Flag#征稿活动,征集你2021年的购物学习生活计划!>&g ...
- jQuery手风琴图切换特效插件
http://www.jq22.com/jquery-info6602 http://www.jq22.com/search?seo=jQuery%E6%89%8B%E9%A3%8E%E7%90%B4 ...
- html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
利用CSS固定背景交替实现视差滚动效果 Sponsor 视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂.没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技 ...
- 背景色自动切换html,css3动画之背景颜色的自动切换
因为不同浏览器内核的不同所以会产生浏览器兼容性问题 背景颜色的变换 div{ width: 200px; height: 200px; background: blue; animation:myfi ...
- jquery开关灯案例_jquery图文开关灯切换特效
非常实用,从网站扣下来的,第一时间与大家分享,实现了jquery图文开关灯切换特效,使用非常简单,网友们下载下来看一下就明白了... 查看演示 下载资源: 14 次 下载资源 下载积分: 20 积分 ...
最新文章
- 2 Ways Thinking In Ajax
- MySQL中的分页查询
- win7 curl安装
- 在web.config中配置httpHandlers节点是的说明
- 11. 列表标签及其应实例
- linux禁用ssh弱加密算法,SSHSSL弱加密算法漏洞修复
- 如何为 Mac 添加新语言?
- 论文笔记_S2D.48_2017-IEEE RAL_单视图和多视图深度融合
- c# winform实现人脸识别系统(文末附源码)
- 技术分享 | Online DDL 工具 gh-ost
- c语言d6d0,【单选题】汉字中的十六进制的机内码是D6D0H,那么它的国标码是(·) x2012
A. 5650H B. 5651H C. 5653H D. 5654H...
- Windows 批量打印
- 一个花里胡哨的渐变雷达图 echarts图表
- 不能换行 俄语 前端h5_H5兼容问题及解决方法
- 打印文件,打印机出error纸张
- 什么的出现标志着电子计算机的到来,20世纪四五十年代以来,人类在原子能、计算机、航天技术、电力机械等方面取得了重大突破,标志着新的科学技术革命的到来。——青夏教育精英家教网——...
- open-set recognition(OSR)开集识别
- linux nas 多硬盘,较低负担的四硬盘 NAS 选择,Synology DS416j 登场
- 创新工厂CEO李开复:互联网的九个产品精神
- 配送中心的自动化与智能化(zt)