奇偶行高亮显示及鼠标划过高亮显示类
花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码:
奇或偶数行高亮显示及鼠标划过高亮显示类~@Mr.Think
body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em}
h1{font-size:1em; font-weight:normal;}
h1 a{background:#CFF; padding:2px 3px; text-decoration:none;}
h1 a:hover{background:#eee; text-decoration:underline}
table#itab{border:1px solid #999; width:80%; margin:0 auto; border-collapse:collapse}
table#itab td{border:1px solid #ccc; text-align:center;}
table#itab caption{font-size:1em; font-weight:normal; color:#a40000; margin-top:20px;}
.gray{background:#eee;cursor:pointer}
.red{background:#a40000; color:#fff; cursor:pointer}
.highol{background:#ccf;cursor:pointer}
ol#olid{width:80%; margin:1em auto; padding:0}
ol#olid li{list-style:inside decimal;text-indent:5px;line-height:2.2em;}
ol#olid em{color:#a40000;}
//@Mr.Think---公用加载类
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//@Mr.Think---附加样式的类
function addClass(elem,value){
if(!elem.className){
elem.className=value;
}else{
var newClass=elem.className;
newClass+=" ";
newClass+=value;
elem.className=newClass;
}
}
//@Mr.Think---奇或偶数行高亮显示及鼠标划过高亮显示
function highLight(elemid,tagName,tagNameHighClass,crossTagNameClass){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(elemid)) return false;
var elemid=document.getElementById(elemid);
tagNames=elemid.getElementsByTagName(tagName);
//奇数行高亮显示
var odd=true;//它的值决定是奇数高亮显示还是偶数高亮显示
for(var i=0; i
Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.
| 1 | A | C | D | Y |
| 2 | B | S | A | E |
| 3 | H | I | F | J |
| 4 | A | G | A | N |
| 5 | Z | A | G | M |
| 6 | C | D | L | H |
| 7 | D | W | G | S |
| 8 | T | Q | O | M |
- 可以通过改变var odd=true;的值来确定是高亮显示奇数行还是偶数行;
- DOM编程,兼容主流浏览器,可扩展性强;
- 适应于表格,列表,div等;
- elemid:事件ID,就是你想实现这种效果所在ID;
- tagName:事件tagName值,比如li,tr,p等等;
- tagNameHighClass:奇或偶数行高亮显示的样式;
- crossTagNameClass:鼠标划过时高亮显示的样式.
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
参数说明:
1.elemid:事件ID,就是你想实现这种效果所在ID;
2.tagName:事件tagName值,比如li,tr,p等等;
3.tagNameHighClass:奇或偶数行高亮显示的样式;
4.crossTagNameClass:鼠标划过时高亮显示的样式.
使用说明:
1.如果你只想要其中一个效果,在类中,删除对应的不需要的代码,有注释;
2.调用(加载函数建议用本文中的加载函数,用window.onload非明智之举):
代码如下:
window.onload=function highYourElem(){
highLight("yourId","yourTagName","yourHighClass","yourCrossClass");
}
相关推荐
-
jquery(1.3.2) 高亮选中图片边框
因为需要加载文件,建议刷新下 高亮选中图片边框 #mainboard img{ border:1px solid #cccccc; width:88px; height:31px; cursor:pointer; } $(function(){ $("#mainboard img").bind("click",function(){ $(this).css("border","1px solid red").siblings(
-
jQuery实现鼠标滑过遮罩并高亮显示效果
复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标滑过遮罩高亮效果</title> <style> *{padding:0;margin:0;} ul,li
-
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
今天为大家带来一款鼠标经过当前高亮其它变暗jQuery插件jFade,此款插件能实现的功能简单而且很实用,当鼠标经过图片列表或是文字列表时悬停当前高亮显示,其它图片列表变暗突出显示鼠标当前悬停. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
js代码: css代码: 复制代码 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
-
mapper--图片热点区域高亮组件官方站点
很有意思的一个东西,我们都用过图片热点对多个切片做链接,也用过链接的hover高亮效果,但却没有办法实现图片热点的高亮效果(即鼠标悬停在某个热点区域时该区域高亮显示). Mapper就是这样的小组件,利用js绘图和css定义实现了这样一个很有用处的功能. 官方站点及演示:http://www.netzgesta.de/mapper/ =================================== PS:除此之外,该站还有一些其他的图片特效js库,对图片的各种效果做的真是炉火垂青!赞! 进
-
奇偶行高亮显示及鼠标划过高亮显示类
花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码. 核心JavaScript代码: 奇或偶数行高亮显示及鼠标划过高亮显示类~@Mr.Think body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px
-
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin
-
如何用jquery控制表格奇偶行及活动行颜色
虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: 复制代码 代码如下: body { font-size:12px; } th { color: #FFFFFF;
-
表格奇偶行设置不同颜色的核心JS代码
这是一个比较实用的功能,设置奇偶行颜色不同后阅读表格数据的体验明显变好,否则数据会显得非常繁杂拥挤(当表格数据行多时体验尤为明显).只有当你自己真正做这方面的东西接触到时才有强烈的体会,反正我是刚刚经历了,留在这里备参考吧~ 核心JS脚本代码如下(table元素的id根据自己的情况调整,代码中的jquery-1.7.min.js可以到jquery的官网上下载) 复制代码 代码如下: <script src="jquery-1.7.min.js"></script>
-
jQuery实现表格奇偶行显示不同背景色 就这么简单
做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便.通常我们是怎么实现的呢?就是在每个tr标签上加css样式. 代码如下所示: <html> <style type="text/css"> .odd { background-color:yellow; } .even { background-color:red; } </style> <body> <table border="
-
js实现鼠标划过给div加透明度的方法
本文实例讲述了js实现鼠标划过给div加透明度的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> <!-- Begin if ((navigator.appName.indexOf('Microsoft')+1)) { document.write('<style type="text/css"> #div2 a img{ filter:alpha(opacity=100)}
-
JS+DIV实现鼠标划过切换层效果的方法
本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>DIV层切换</title> <script language="JavaScript" type="text/javascript"> /********************************************* 功能: 通用DIV切换函数 参数: d
-
jQuery实现鼠标划过修改样式的方法
本文实例讲述了jQuery实现鼠标划过修改样式的方法.分享给大家供大家参考.具体如下: $(document).ready(function () { //默认情况下样式 $("input:text").attr("style","border:1px solid #7E9DB9;"); //鼠标移入样式 $("input:text").mouseover(function () { $(this).attr("st
-
jQuery实现鼠标划过添加和删除class的方法
本文实例讲述了jQuery实现鼠标划过添加和删除class的方法.分享给大家供大家参考.具体实现方法如下: $('#elm').hover( function(){ $(this).addClass('hover') }, function(){ $(this).removeClass('hover') } ) 希望本文所述对大家的jQuery程序设计有所帮助.
-
jQuery实现鼠标划过展示大图的方法
本文实例讲述了jQuery实现鼠标划过展示大图的方法.分享给大家供大家参考.具体如下: 这里用css和jquery实现鼠标移上元素时大图展示,并且大图不能溢出整个div框 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x