js模拟鼠标滑过展示title效果

//注册mouseover、mouseout事件

function registWarnTips() {

$(".ztRed").mouseover(function() {

var tips = "费用累计使用比例大于等于80%(包含本笔),红灯预警";

//获取当前鼠标X轴、Y轴位置

var mousePos = MouseCoords();

showTips(tips, mousePos.x - 300, mousePos.y - 15);

});

$(".ztRed").mouseout(function() {

hideTips();

});

}

/**

* 浮动DIV显示提示信息

* @param string tips (提示的内容)

* @param int height 显示的信息距离浏览器左边的距离

* @param int height 显示的信息距离浏览器顶部的距离

*/

function showTips(tips, iX, iY) {

var tipsDiv = ‘<div class="tipsClass">‘ + tips + ‘</div>‘;

$(‘body‘).append(tipsDiv);

$(‘div.tipsClass‘).css({

‘top‘: iY + ‘px‘,

‘left‘: iX + ‘px‘,

‘position‘: ‘absolute‘,

‘z-index‘: ‘99999‘,

‘padding‘: ‘5px 5px 5px 5px‘,

‘background‘: ‘infobackground‘,

‘border‘: ‘1px solid black‘,

‘font-size‘: 12 + ‘px‘,

‘margin‘: ‘0 auto‘,

‘text-align‘: ‘left‘,

‘width‘: ‘290px‘,

‘color‘: ‘black‘,

‘opacity‘: ‘0.8‘

}).show();

}

function hideTips() {

$(‘div.tipsClass‘).remove();

}

function MouseCoords() {

var ev = ev || window.event;

if (ev.pageX || ev.pageY) {

return { x: ev.pageX, y: ev.pageY };

}

return {

x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y: ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

时间: 2025-01-05 14:12:30

js模拟鼠标滑过展示title效果的相关文章

css3和js实现鼠标滑过图片微移动 平滑过渡

<!doctype html> <html> <head> <meta charset="utf-8"> <title>index</title> <script src="jquery-1.11.1.min.js"></script> <body> <div class="item"> <a href="&qu

基于CSS3鼠标滑过放大突出效果

还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种突出放大的CSS3动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <ul class="evenflow sample_1"> <li class="e

由chrome剪贴板问题研究到了js模拟鼠标键盘事件

写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.clipboardData.getData("Text") 可是在chrome下面就行不通了,chrome下面没有类似ie的这种方法,那应该怎么办呢,百度了一下,发现还真有办法. 只要在HTML界面上放上一个text类型的控件,如下所示 <textarea id="textAre

JS模拟左滑删除

接触前端有半年的时间了,不会的都会去搜索别人的代码,这是本人第一篇博客,也是因为在搜索了很多关于左滑删除的例子,但是结果并不是很好,虽然样式上面实现了,但是大多数都会有无法点击删除或是无法控制事件的困扰,所以简单整理一种写法,菜鸟一只,只求不喷~ 先简单说一下思路,在一个container容器里面,定义两个平级的标签   [显示内容+删除按钮],,按钮绝对定位在右侧,z-index 在后方,需要固定宽度,当滑动显示内容的部分,按钮显示出来.通过 active 的添加和删除实现,下面是代码部分:

css鼠标滑过出现文字效果

模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&qu

用js模拟鼠标点击事件(事件触发)

事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法. 一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件.这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法.

jquery鼠标滑过展示图片时显示详情

jquery: 1 <script src="js/jquery.js" type="text/javascript"></script> 2 <script type="text/javascript"> 3 $(document).ready(function(){ //页面边加载边执行 4 $('.box').hover( 5 function(){ 6 $(this).find('img').anima

Asp.Net中GridView加入鼠标滑过的高亮效果和单击行颜色改变

转载自:http://www.cnblogs.com/fly_dragon/archive/2010/09/03/1817252.html 1 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 2 { 3 //鼠标经过改编颜色 4 if (e.Row.RowType == DataControlRowType.DataRow)//判定当前的行是否属于datarow类型的行 5 { 6 7 //

jquery插件之表格隔行变色并鼠标滑过高亮显示

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <