js控制鼠标事件移动及移出效果显示
鼠标事件的移动及移出效果都可以使用js来自定义,下面有个示例,效果为当事件发生改变时背景颜色也随着改变,适合新手朋友
<style type="text/css"> .style0{ background-color:#FFFF00; } .style1{ background-color:#00FFFF; } </style> </head> <body> <table width="576" height="79" border="1"> <tr> <td id="td1" onmousemove="document.getElementById('td1').className='style0';" onmouseout="document.getElementById('td1').className='style1'"><div align="center" class="STYLE2">主页</div></td> <td><div align="center" class="STYLE2">男</div></td> <td><div align="center" class="STYLE2">女</div></td> </tr> </table> </body>
相关推荐
-
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
具体用法是这样的: 将Javascript代码放到</body>前(将脚本代码放在页面底端有助于提高页面速度,但是我现在还没有切身的体会) 复制代码 代码如下: <script language=JavaScript> function mouseOutPic() //当鼠标移出时,隐藏原图 { if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden&qu
-
JS实现鼠标移动到缩略图显示大图的图片放大效果
一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;
-
js实现鼠标移到链接文字弹出一个提示层的方法
本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
-1.右侧弹出导航菜单完整代码 复制代码 代码如下: <!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> <met
-
JavaScript实现类似拉勾网的鼠标移入移出效果
先上效果图(gif自己录制的,有点难看抱歉,工具licecap) 实现思路 HTML结构 <ul> <li> <div class="bg"> <p>JS</p> </div> </li> ..... </ul> li作为鼠标移入(mouseenter)和鼠标移出(mouseleave)的载体. div作为动画执行的载体. CSS div采用absolute定位,通过top.left改变它
-
js鼠标移动在title中显示图片的效果代码
1.js代码 复制代码 代码如下: //***********默认设置定义.********************* tPopWait=50;//停留tWait豪秒后显示提示. tPopShow=5000;//显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFa
-
鼠标拖拽移动子窗体的JS实现
1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div> <div class="modal-window"> <div class="head"> <center>点住着块区域可以改
-
javascript实现图片跟随鼠标移动效果的方法
本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g
-
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
后台代码 复制代码 代码如下: /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) {
-
js+html+css实现鼠标移动div实例
js: 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p
随机推荐
- 如何对用户进行授权?
- 如何查询占CPU高的oracle进程
- jquery实现图片渐变切换兼容ie6/Chrome/Firefox
- node.js中的url.parse方法使用说明
- ObjectInputStream 和 ObjectOutputStream 介绍_动力节点Java学院整理
- SignalR Self Host+MVC等多端消息推送服务(三)
- Ubuntu VMware出现提示No 3D support is available的解决方法
- 使用Apache的rewrite技术
- 优化PHP代码的53条建议
- PHP中call_user_func_array()函数的用法演示
- C#基于数据库存储过程的AJAX分页实例
- php地址引用(php地址引用的效率问题)
- JavaScript排序算法动画演示效果的实现方法
- JS实现带有3D立体感的银灰色竖排折叠菜单代码
- destoon常用的安全设置概述
- 一个可以显示阴历的JS代码
- 批处理版的SC
- 微信小程序 简单教程实例详解
- js中自定义方法实现停留几秒sleep
- 创建高性能的 Web 页面