`
fastwind
  • 浏览: 323827 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

背景色淡入淡出的表格

阅读更多

 

<script language="JavaScript">
<!--
var step = 1; //步长
function show(obj) {
  if ((obj.filters.alpha.opacity+step>=100)||(obj.filters.alpha.opacity+step<5)) step=-step;
obj.filters.alpha.opacity+=step;
}
setInterval ("show(me)",100);
//-->
</script>表格代码:
<table border=1 cellpadding=0 cellspacing=0 id="me"style="width:80%;height:150;filter:alpha(opacity=50);" bgcolor=red>
<tr>
<td></td>
</tr>
</table>

 



代码分析:

  函数 show(obj) 中,我们实际上使用了 CSS 的 alpha 滤镜来实现对被修饰对象的颜色的淡入淡出变化。对象的透明度在递加(obj.filters.alpha.opacity+=step;),如果递加到100或当透明度少于5时令透明度值返回步长(step)的相反数(step=-step;),这样,透明度值在5到100之间(可能更改)来回变化,从而得到淡入淡出的结果。

  函数产生的效果由 setInterval(参数1,参数1) 控制频率。setInterval()和setTimeout()的结构一致,第一个参数为“事件”,第二个参数为间隔时间(单位为毫秒),setInterval ("show(me)",100);中,show(me)就是事件,me为被修饰对象的id标识。

  我们自定义的函数 show(obj) 要在被修饰的对象中产生作用,该对象必须有id标识,且该标识一定与setInterval里的标识一致(同时请注意,该id在整个网页代码中是唯一的)。凡有id标识的HTML标签所对应的对象都会产生函数所定义的效果(比如文本前景色、图片、表格、body的背景色等)。当然,我们这个函数使用了CSS的alpha滤镜,所以本节函数所修饰的对象必须够被alpha修饰(否则没有意义),同时该对象必须有alpha的初始值(详情请查看演示效果中颜色深浅变化着的表格里的代码)。

 

分享到:
评论

相关推荐

    易语言高级表格鼠标移动时改变行背景色API版.7z

    《易语言高级表格鼠标移动时改变行背景色API版》是一个专为易语言设计的程序模块,用于在用户鼠标移动到表格行上时动态改变行的背景颜色。这个功能常见于各种数据展示和编辑的应用中,能提升用户体验,使得用户在...

    网页表格经典css样式

    9. **动画效果**:CSS动画可以让表格更具吸引力,例如淡入淡出、滑动等,使用`transition`和`keyframes`规则可以实现。 10. **自定义单元格**:通过CSS类,我们可以为特定的单元格应用特殊样式,比如高亮重要数据,...

    css3表格样式产品价格页面表格样式

    而`animation`属性则能实现复杂的动画效果,如表格的淡入淡出,增强交互体验。 7. **伪类选择器** 利用CSS3的伪类选择器,如`:hover`, `:active`, 和`:focus`,可以为表格添加交互反馈。例如,当用户鼠标悬停在...

    css样式表格

    6. **自定义样式**:可以使用CSS动画为表格添加动态效果,如淡入淡出、滑动显示等,增加视觉吸引力。 7. **可访问性**:确保CSS样式不影响表格的可访问性,如正确使用`&lt;caption&gt;`元素为表格提供标题,使用`&lt;thead&gt;`...

    js实现漂亮的table表格

    - **动画效果**:CSS3动画可以为表格添加过渡效果,如淡入淡出、滑动等,提升用户体验。 2. **JavaScript增强表格功能**: - **动态加载与排序**:JS可以实现数据的异步加载,减少页面加载时间。同时,可以添加...

    javascript+css仿excel表格效果

    这通常涉及到数据驱动的CSS类切换,例如,当单元格值达到特定条件时,JavaScript会添加一个预定义的CSS类,该类定义了单元格的背景色。 总的来说,通过结合JavaScript和CSS,开发者可以构建一个高度自定义的仿Excel...

    js网页表格导出excel文件代码.zip

    在这个项目中,CSS特效可能用于表格的样式定制,如背景色、边框、行高亮、单元格对齐等,以提升表格的视觉吸引力。 4. **网页表格**:HTML `&lt;table&gt;`元素是网页中最常用的结构之一,用于展示数据。在JavaScript中,...

    jQuery表格编辑添加删除行插件.zip

    CSS特效不仅可以改变表格的样式,如边框、背景色、字体等,还可以实现动态效果,如淡入淡出、滑动等。例如,当用户添加或删除行时,新行可以优雅地淡入,被删除的行则逐渐消失。 接下来,我们关注如何使用这个插件...

    jQuery表格特效

    例如,使用`.fadeIn()`和`.fadeOut()`可以使行或列淡入淡出,`.slideToggle()`则能实现上下滑动的效果。这些动画效果能为表格操作增添视觉吸引力。 再者,jQuery插件如DataTables、jqGrid和Bootstrap Table等,专门...

    JS实现漂亮的表格table特效代码

    2. **CSS美化表格**:通过CSS,我们可以改变表格的样式,如边框、颜色、字体、对齐方式、背景色等。例如,使用`border-collapse`属性可以控制表格边框合并,`text-align`设置文本对齐,`background-color`改变单元格...

    css3表格突出显示.zip

    2. **背景色与边框样式**:CSS3允许设置渐变背景、图案背景以及自定义边框样式。在表格中,可以通过改变行或单元格的背景颜色来突出重要数据,使用`border-radius`创建圆角,`box-shadow`添加阴影效果,提升表格的...

    Bootstrap可编辑表格的网页特效.rar

    CSS特效则用于提升用户体验,例如,通过改变边框、背景色或文字样式来区分可编辑和非可编辑单元格。此外,还可以使用CSS动画使编辑过程更加平滑,如淡入淡出效果。 在实现过程中,可能还会涉及AJAX技术,用于异步...

    2011-说服力,工作型PPT该这样做(表格篇)-@秋叶语录.zip

    - **动态效果**:适时使用动画效果,如淡入淡出、飞入飞出等,提高观众的观看体验。 8. **检查与修订** - **核对数据**:确保所有数据准确无误,避免因错误信息影响专业形象。 - **反馈调整**:根据同事或观众的...

    jQuery仿Excel表格列表排序代码.zip

    - **css**:样式表文件,负责表格的样式布局,可能包含浮动、背景色、边框等样式,使得表格更像Excel。 - **fonts**:可能包含自定义字体文件,用于增强表格的视觉效果,如图标字体。 此外,为了提升用户体验,还...

    三色表格PPT模板图表.ppt

    6. **动态展示**:如果是在PPT演示中,可以考虑使用动画效果,如淡入淡出、飞入飞出,使图表的变化更吸引人。 7. **响应式设计**:考虑到不同的展示环境,确保图表在大屏幕和小屏幕设备上都能清晰显示。 三色表格...

    wpf控件库重写美化了各控件,如按钮、表格等

    例如,对于表格(DataGrid),可以定制行和列的样式,添加边框、背景色,甚至定义单元格的交互效果。对于按钮,可以设计新的鼠标悬停、按下状态的视觉效果。 3. **资源字典**:为了实现代码复用,开发者通常会将...

    表格轮换显示 强

    接下来,HTML部分包含了一个带有边框和背景色的表格,表格有两行数据,第一行是标题行,第二行是具体内容。值得注意的是,表格中的内容重复出现多次,这可能是为了实现轮换效果而设计的,通过JavaScript或者CSS的...

    jquery框架动态的修改table

    jQuery还支持各种动画效果,如淡入淡出、滑动等,可以为表格操作增加视觉吸引力。例如,当添加新行时,可以使用`.fadeIn()`使其淡入: ```javascript newRow.hide().appendTo('#myTable tbody').fadeIn(); ``` ...

    用jquery实现几个小例子

    斑马线效果通常用于表格,使得每两行呈现出不同的背景色,提高视觉区分度。使用jQuery,你可以通过选择器选取所有的偶数行并改变它们的样式。以下是一个简单的示例: ```javascript $(document).ready(function() {...

    jquery漂亮的表格特效

    4. **动画效果**:jQuery强大的动画功能可以用于表格,如淡入淡出、滑动等,使得表格的显示和隐藏更加平滑。 5. **响应式设计**:在移动设备普及的今天,响应式设计必不可少。可以利用jQuery和CSS3媒体查询,使表格...

Global site tag (gtag.js) - Google Analytics