奇偶行高亮显示及鼠标划过高亮显示类_javascript技巧

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
  1. 可以通过改变var odd=true;的值来确定是高亮显示奇数行还是偶数行;
  2. DOM编程,兼容主流浏览器,可扩展性强;
  3. 适应于表格,列表,div等;
  4. elemid:事件ID,就是你想实现这种效果所在ID;
  5. tagName:事件tagName值,比如li,tr,p等等;
  6. tagNameHighClass:奇或偶数行高亮显示的样式;
  7. crossTagNameClass:鼠标划过时高亮显示的样式.
时间： 2024-08-01 09:47:14

奇偶行高亮显示及鼠标划过高亮显示类_javascript技巧的相关文章

奇或偶数行高亮显示及鼠标划过高亮显示类

奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果JS,但好像还没有一个封装成类直接用的.想象自己当初谷歌这个类时,还真没少折腾时间. 花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.核心JavaScript代码: //@Mr.Think---添加样式的类function addClass(elem,value){     if(!elem.className){         elem.className=valu

js 奇或偶数行高亮显示及鼠标划过高亮显示

js 奇或偶数行高亮显示及鼠标划过高亮显示 function addclass(elem, value){     if (!elem.classname) {         elem.classname = value;     }     else {         var newclass = elem.classname;         newclass += " ";         newclass += value;         elem.classname =

javascript实现划词标记+划词搜索功能_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <title>Untitled Document</title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

js 鼠标事件的抓取_javascript技巧

鼠标事件的抓取 接收鼠标事件的HTML元素

JS鼠标事件大全 推荐收藏_javascript技巧

一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3

JavaScript 实现鼠标拖动元素实例代码_javascript技巧

一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现  二.设计思路 在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件:为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行 复制

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转_javascript技巧

通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

利用JS判断鼠标移入元素的方向_javascript技巧

最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

鼠标事件延时切换插件_javascript技巧

原理很简单: onmouseover.onmouseout执行业务代码时使用setTimeout进行延时,第二次触发的时候先清除掉前面的setTimeout. 原理 复制代码 代码如下: var timer; document.getElementById('test').onmouseover = function () { clearTimeout(timer); timer = setTimeout(function () { alert('over') }, 150); }; docum