用于鼠标经过出现悬停提示信息

公共方法

var selectType0 = "BI";//定义一个类型
$(function () {
            //提示信息
            $("#id").bind("mousemove", function (event) {
                showCueDiv(selectType0, event);
            }).bind("mouseout", function (event) {
                hiddenCueDiv();
            }).bind("mouseup", function (event) {
                hiddenCueDiv();
            })         
    });
//提示信息
function showCueDiv(type, event) {
    hiddenCueDiv();
    switch (type) {
      case "BI":
        setCueContent("这里输入提示信息");
        break;
    }
    showDiv(event, "commonCueDiv");
}

//隐藏提示信息
function hiddenCueDiv() {
    $("#commonCueDiv").hide();
}
function setCueContent(content) {
    $("#divID").html(content);
}

/**
 * 用于鼠标经过出现悬停提示信息
 * 参数:event:鼠标的onmousemove事件,objID要显示的提示信息模块id
 */
function showDiv(event, objID) {
    var srcEle = event.srcElement?event.srcElement:event.target;
    var left = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    var top = event.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
    var objWidth = $("#" + objID).width();
    if (left > screen.availWidth - objWidth - 50) {
        left = (screen.availWidth - objWidth - 50);
    }
    top += 10;
    $("#" + objID).css("left", left);
    $("#" + objID).css("top", top);
    $("#" + objID).show();
}

时间: 2024-08-02 11:04:20

用于鼠标经过出现悬停提示信息的相关文章

jquery.elevateZoom实现仿淘宝看图片,一张小的,一张大用于鼠标经过时候显示

实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可以了. 下面给出一个例子(在github下载的代码中有这个例子): 插件下载地址:https://github.com/elevateweb/elevatezoom [html] <!DOCTYPE html> <html> <head> <m

鼠标触及连接滚动提示信息

<html> <head> <title>鼠标触及连接滚动提示信息-石家庄瑜伽馆</title> </head><body> <!--将以下代码加入HTML的<Body></Body>之间--> <style type="text/css"> <!-- a:link { color: #0020FF; text-decoration: none;font-siz

js学习-鼠标经过输入框显示提示信息

经过输入框能显示信息,一种直接用css的title属性,title属性能显示要提示的信息,但不宜控制, 学习整理js方法,即如下代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>移动到输入框提示信息</title> <style type="text/css"> #info{background: #cc

Ueditor 自定义按钮

第一步:找到ueditor文件夹下的ueditor.config.js下toolbars参数,新增一个字符串showmsg,同时新增一个labelMap用于鼠标移入显示自定义提示信息. //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义 , toolbars: [[ ......,print', 'preview', 'searchreplace', 'help' //, 'drafts' 从草稿箱加载 //新增自定义按钮 ,'showmsg' ]] //自定

要求:鼠标移入显示提示信息框;鼠标离开,信息框消失,消失的效果延迟

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatib

改变窗体的大小(理解鼠标的操作事件和过程)

1.Designer.cs代码 namespace 手动改变自制窗体的大小 { partial class Form1 { /// <summary> /// 必需的设计器变量. /// </summary> private System.ComponentModel.IContainer components = null; /// <summary> /// 清理所有正在使用的资源. /// </summary> /// <param name=&

界面控件 - 滚动条ScrollBar(对滚动条消息和鼠标消息结合讲的不错)

界面是人机交互的门户,对产品至关重要.在界面开发中只有想不到没有做不到的,有好的想法,当然要尝试着做出来.对滚动条的扩展,现在有很多类是的例子. VS2015的代码编辑是非常强大的,其中有一个功能可以把滚动态变成MinMap,可以通过Options->Text Editor->C/C++->Scroll Bars中的Behavior选项分类进行打开. sublime也有这个功能,但没有VS的好用.变成MinMap后整个代码文档变成一个完整的缩微图,在你对代码比较熟悉的情况下,可以非常容易

jQuery地图热点效应-后在弹出的提示鼠标层信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>地图热点效果-鼠标经过弹出提示信息</title> <meta http-equiv="Content-Type" content=&q

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快. 实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可