<!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>
分享到：
相关推荐
"jQuery 渐变切换Tab标签"是将这一交互方式与动态视觉效果相结合，为用户提供更加吸引人的浏览体验。在本教程中，我们将深入探讨如何使用jQuery实现这种渐变切换效果，以及它与其他Tab标签的区别。 首先，让我们...
如果压缩包中的文件名如“jQuery渐变.css”或“jQuery渐变.js”，它们可能包含了实现图片渐变效果的具体样式或脚本。这些文件可以提供更复杂的动画逻辑，比如更平滑的过渡、多个图片的轮播效果，或者是与其他元素...
在这个压缩包中，"弹性字体jQuery渐变焦点图"可能包含了一个完整的示例项目，用于展示如何实现这种效果。 首先，我们来了解一下HTML5。HTML5是超文本标记语言的最新版本，增强了网页的多媒体支持，如音频、视频、...
而"QQ相册jQuery渐变式焦点图"很可能是包含所有必要文件的主文件，比如JavaScript代码、CSS样式和可能的示例图片。 总的来说，QQ相册jQuery渐变式焦点图利用jQuery库和ECMAScript标准，实现了在主流浏览器上兼容的...
"jQuery渐变切换Banner焦点图.zip"是一个包含jQuery实现的动态图片展示效果，通常用于网站的首页或者产品展示区域，以吸引用户的注意力并提供视觉上的吸引力。 该jQuery插件的核心特性是其渐变切换效果。渐变效果是...
101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝好...
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
**jQuery图片添加渐变遮罩层插件** 在网页设计中，为了提升视觉效果和用户体验，经常需要对图片进行各种处理。"jQuery图片添加渐变遮罩层插件"就是为了实现这一目标而设计的工具。它允许开发者为背景图片轻松添加...
**jQuery无缝图片渐变特效**是一种常见的网页动态效果，它为网站添加了视觉吸引力和专业感。这种特效通常用于展示产品图片、摄影作品或者任何需要连续滚动的图像集合。在这个插件中，它提供了5种不同的轮播样式，...
【jQuery鼠标悬停背景渐变按钮】是一种网页交互设计中的特效技术，主要应用于网页上的按钮元素，以增强用户的视觉体验和交互感受。这种特效通过jQuery库实现，jQuery是JavaScript的一个强大库，它简化了HTML文档遍历...
**jQuery滚动相册实现代码带渐变效果** 在网页设计中，相册是展示图片集的一个常见元素，而使用jQuery实现的滚动相册不仅能够提供动态的用户体验，还能通过添加渐变效果提升视觉吸引力。本篇文章将深入探讨如何利用...
这个名为"JQuery CSS3 示例"的压缩包很可能是提供了一些实用的代码片段，帮助开发者更好地理解和运用这两种技术。 首先，JQuery是一个JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画效果和Ajax...
总的来说，这个压缩包中的代码示例展示了如何结合jQuery和CSS技术，创建一个动态、吸引人的全屏背景图片效果，同时融入了颜色渐变这一视觉元素。这不仅提高了网站的视觉冲击力，也是前端开发者提升用户体验的一个...
本示例将详细解析如何使用jQuery实现鼠标响应式透明度渐变动画效果。 首先，我们要理解jQuery的核心概念。jQuery通过选择器选取DOM元素，然后对这些元素进行操作。在这个例子中，我们关注的是`onmouseover`和`...
【jQuery几何渐变背景网站图文导航】是一种网页设计技术，主要利用jQuery库和CSS样式来创建动态、引人入胜的导航菜单。这种导航栏通常包含几何形状的背景，通过渐变色彩增加视觉吸引力，同时结合文字和图像，提供...
本项目"jquery实现的滚动效果 渐变导航特效.rar"就是利用jQuery来实现一种独特且吸引人的导航菜单效果。 这个特效主要包含两个核心部分：滚动效果和渐变导航。滚动效果通常指的是当用户滚动页面时，页面元素根据...
【jQuery右侧渐变显示隐藏的在线客服...总的来说，"jquery右侧渐变显示隐藏的在线客服代码"是一个实用的前端开发示例，涵盖了jQuery基础、CSS动画、用户交互等多个方面，对于提升网站的互动性和用户体验有着积极作用。
本篇文章将详细讲解基于jQuery实现的超炫淡入淡出效果、DIV渐变居中弹出框插件的原理与应用。 首先，"jQuery超炫淡入淡出效果"是指利用jQuery提供的fadeIn()和fadeOut()方法，实现元素的平滑透明度变化，从而达到...
【CSS3颜色渐变选择器jQuery代码】是一个用于创建网页设计中颜色渐变效果的工具。这个工具基于jQuery库，提供了便捷的方式为网页元素添加丰富多彩的CSS3渐变背景。CSS3是CSS（层叠样式表）的第三个版本，引入了许多...
学习这些示例代码，开发者可以了解到具体的实现细节，例如如何定义渐变颜色数组，如何使用jQuery的animate方法进行动画效果，以及如何控制颜色切换的频率和行为。 总的来说，jQuery网页背景渐变色切换特效是一种将...