jquery背景自动切换特效
查看效果网址:
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前端:http://www.cnblogs.com/jihua/p/webfront.html
jquery背景自动切换特效的更多相关文章
- jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 基于jQuery左右滑动切换特效
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- js 背景自动切换
//首页自动更换背景特效开始============================================ var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组 ...
- Python3实现Win10桌面背景自动切换
[本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...
- jquery 图片自动切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- CSS实现页面背景自动切换功能
From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> & ...
随机推荐
- 无法在“EntityFramework”已存在的情况下创建影像复制该文件的解决方案
问题产生的原因:你项目正在生成中你就打开浏览器预览了,导致这个问题解决方案:右击重新生成项目,等生成后再打开 “/”应用程序中的服务器错误. 无法在“EntityFramework”已存在的情况下创建 ...
- javascript运动系列第二篇——变速运动
× 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...
- 关于SubSonic3.0插件使用Json反序列化获得的实体进行更新操作时,只能执行添加而不能执行修改(编辑)操作的处理
由于目前开发的项目使用云计算技术,客户端只进行UI与相关事件的功能开发,而所有的计算与处理都放到了服务器端,客户端与数据库没有任何关联,所以服务器端与客户端使用我们自己开发的通讯加密方式进行,而具体的 ...
- C# 如何将List拆分成多个子集合
网上的例子: 问:List<string> list = new List<string>(); for (int i = 1; i < 95; i++) ...
- 基础知识javascript--事件
群里有一个小伙伴在处理事件监听函数的时候,遇到了一点问题,正好我比较空闲,于是帮他指出了代码中的问题,顺便整理一下,方便以后遇到类似问题的伙伴们有一个参考. 这是一个很简单的问题,对于基础知识比较杂实 ...
- 1Z0-053 争议题目解析699
1Z0-053 争议题目解析699 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 699.Your database is using a default temporary ta ...
- 相克军_Oracle体系_随堂笔记004-shared pool
本章主要阐述SGA中的shared pool. Shared pool { 1.free 2.library cache(缓存sql语句及其执行计划) 3.row cache(数据字典缓存) } ...
- Linux中读写权限
learn the auth of Linux. Generally, r-x w: write , modify and delete -2 r: read -4 x: execute ...
- 我的angularjs源码学习之旅2——依赖注入
依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时 ...
- Rafy 领域实体框架演示(4) - 使用本地文件型数据库 SQLCE 绿色部署
本系列演示如何使用 Rafy 领域实体框架快速转换一个传统的三层应用程序,并展示转换完成后,Rafy 带来的新功能. <福利到!Rafy(原OEA)领域实体框架 2.22.2067 发布!> ...