<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Cycle</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
table.outTable{
width: 500px;
border-top: #037DC7 1px solid;
border-collapse: collapse;
}
.outTable td{
height: 15px;
border: #037DC7 1px solid;
border-collapse: collapse;
}
table.inTable{
border: #037DC7 0px solid;
}
.inTable td.leftSideTd{
width: 15px;
height: 100px;
line-height:100px;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
var first = true;
function decrescendo(o) {
$("#td"+o).css("background-color", "#C2F7A6");
$("#td"+o).css("opacity", "1.0");
$("#td"+o).animate({opacity: 0.4}, {duration: 500});
}
function crescendo(o) {
$("#td"+o).css("background-color", "#C2F7A6");
$("#td"+o).css("opacity", "0");
$("#td"+o).animate({opacity: 1}, {duration: 500});
}
function cycle(o){
var preO = o - 1;
if(o == 1) {
preO = 14;
}
//$("#td"+preO).css("background-color", "#FFFFFF");
if(!first) {
decrescendo(preO)
}
first = false;
var nextO = o + 1;
if(o == 14) {
nextO = 1;
}
//$("#td"+o).css("background-color", "#C2F7A6");
crescendo(o)
setTimeout("cycle("+nextO+")", 300);
}
</script>
</head>
<body>
<input type="button" value="begin" onclick="cycle(1);" />
<br /><br /><br />
<div style="margin: 0 auto; align:center;">
<table class="outTable" align="center">
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
<td id="td4"></td>
</tr>
<tr>
<td colspan="2" style="border: 0px;">
<table align="left" class="inTable">
<tr>
<td id="td14" class="leftSideTd" style="border-top: 0;"></td>
</tr>
<tr>
<td id="td13" class="leftSideTd"></td>
</tr>
<tr>
<td id="td12" class="leftSideTd" style="border-bottom: 0;"></td>
</tr>
</table>
</td>
<td colspan="2" style="border: 0px;">
<table align="right" class="inTable">
<tr>
<td id="td5" class="leftSideTd" style="border-top: 0;"></td>
</tr>
<tr>
<td id="td6" class="leftSideTd"></td>
</tr>
<tr>
<td id="td7" class="leftSideTd" style="border-bottom: 0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="td11"></td>
<td id="td10"></td>
<td id="td9"></td>
<td id="td8"></td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝好...
主要介绍了jQuery实现鼠标响应式透明度渐变动画效果,涉及jQuery事件响应及动态修改页面元素属性相关操作技巧,需要的朋友可以参考下
插件描述：5种方式轮播图. 参考示例：http://www.saikaung.net
101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝...
jQuery featureList图片渐变切换_带图标的选项卡...
jquery animate图片模向滑动示例，适用于展示图片太多的页面，通过点击左右方向按钮，滑动展示更多的图片。功能简单，在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的...
jQuery实现焦点图片Flash自动平滑渐变效果 jQuery实现鼠标移到链接提示显示图片功能插件 jquery实现鼠标经过链接放大图片特效代码 jquery实用Banner大图片横向切换效果 jquery实用产品图片展示动感切换效果源码 ...
jQuery美化链接文字为渐变风格，不管网页上显示的是什么文字 ，只要在规定的标签ID内，文字就会被美化成渐变风格，渐变的颜色你可以自定义，默认是黑灰风格的渐变，有种金属的质感，如示例截图所示。
jQuery TAB选项卡，彩色渐变风格，带动画效果，一共有四款选项卡示例，风格大致相似。只是有些是使用背景图片来修饰，每一款选项卡都附有关键的代码调用说明，下载后，可参考压缩包中的index.html文件中用法。
本文实例讲述了jQuery实现的背景颜色渐变动画效果。分享给大家供大家参考，具体如下： 完整实例代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
作为jQuery Mobile的入门级读物，《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性，内容系统全面，便于理解。 《jQuery Mobile快速入门》总共分为10章，内容包括jQuery Mobile的基础...
44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
作为jquery mobile的入门级读物，《jquery mobile快速入门》以示例方式讲解了jquery mobile的基本知识和核心特性，内容系统全面，便于理解。 《jquery mobile快速入门》总共分为10章，内容包括jquery mobile的基础...
作为jQuery Mobile的入门级读物，《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性，内容系统全面，便于理解。 《jQuery Mobile快速入门》总共分为10章，内容包括jQuery Mobile的基础...
内容索引:脚本资源,jQuery,动态按钮 jQuery 制作的具有动态渐变效果的按钮，谨以此写给web设计者和前端开发者，内含PSD源文档，本示例将演示如何使用Photoshop创建按钮的sprite图，然后介绍如何使用jQurey实现动态...