实现鼠标移到某个对象,在旁边显示层。

当鼠标移到某个地方的时候,在旁边飘出一个DIV,离开则消失。

是使用了某位大大封装的一个函数,稍微改了下。

原文地址: 当鼠标移动上去显示一个层,在这个对象的旁边,并且可以给这个层添加值

效果如下:

函数代码,放到一个JS文件里:

[javascript] view plaincopyprint?

  1. /**
  2. * 鼠标移上去显示层
  3. * @param divId 显示的层ID
  4. * @returns
  5. */
  6. $.fn.myHoverTip = function(divId) {
  7. var div = $("#" + divId); //要浮动在这个元素旁边的层
  8. div.css("position", "absolute");//让这个层可以绝对定位
  9. var self = $(this); //当前对象
  10. self.hover(function() {
  11. div.css("display", "block");
  12. var p = self.position(); //获取这个元素的left和top
  13. var x = p.left + self.width();//获取这个浮动层的left
  14. var docWidth = $(document).width();//获取网页的宽
  15. if (x > docWidth - div.width() - 20) {
  16. x = p.left - div.width();
  17. }
  18. div.css("left", x);
  19. div.css("top", p.top);
  20. div.show();
  21. },
  22. function() {
  23. div.css("display", "none");
  24. }
  25. );
  26. return this;
  27. }
/**
 * 鼠标移上去显示层
 * @param divId 显示的层ID
 * @returns
 */
$.fn.myHoverTip = function(divId) {
    var div = $("#" + divId); //要浮动在这个元素旁边的层
    div.css("position", "absolute");//让这个层可以绝对定位
    var self = $(this); //当前对象
    self.hover(function() {
        div.css("display", "block");
        var p = self.position(); //获取这个元素的left和top
        var x = p.left + self.width();//获取这个浮动层的left
        var docWidth = $(document).width();//获取网页的宽
        if (x > docWidth - div.width() - 20) {
            x = p.left - div.width();
        }
        div.css("left", x);
        div.css("top", p.top);
        div.show();
    },
    function() {
        div.css("display", "none");
    }
    );
    return this;
}

在哪个对象旁边显示DIV,随自己定义,只要定义一个ID即可:

如: <a id="viewReInfo" href="#" >查看收件人回执情况</a>

需要显示的DIV,根据需求自己定义,同样只需定义ID即可:

如:<div id="receiptInfo" class="receiptInfo"></div>

调用上面的JS函数,代码如下:

$(‘#viewReInfo‘).myHoverTip(‘receiptInfo‘);

时间: 2024-10-09 05:44:59

实现鼠标移到某个对象,在旁边显示层。的相关文章

VC/MFC 当鼠标移到控件上时显示提示信息

VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法. 一般用法步骤:  添加CToolTipCtrl成员变量 m_tt.  在父窗口中调用EnableToolTips(TRUE);  在窗口的OnCreate(或者其他适当的位置)中向ToolTip中添加需要显示Tip的子窗口,并同时指定相应的显示字串CToolTipCtrl::AddTool(pW

lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单

打开includes\templates\lightinthebox\common\tpl_box_dropdown_categories_css.php 1.将大约23行代码 <ul id="menu_index_top"> <li> 改成 <ul id="menu_index_top"> <li id="litbBtna"> 2.在53行 menuToggle('litbBtn','mouseo

dede 鼠标移到标题处显示完整标题

有些标题过长,为了页面的美观,会对标题的长度进行控制,会截断一些. 给标题加上title属性就能让读者把鼠标移到标题上就能显示完整标题了. 之前我也注意到要把title给添加上,用的是以下这种方式. <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a> 但是生成的时候,title里面的标题还是会别截断,换成title="[field:fulltitle

将鼠标移到文本最后

1 //将鼠标移到文本最后 2 function set_focus(el) { 3 el.focus(); 4 if (el instanceof jQuery) el = el[0]; 5 //el=el[0]; //jquery 对象转dom对象 6 if ($.support.msie) { 7 var range = document.selection.createRange(); 8 this.last = range; 9 range.moveToElementText(el);

DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )  取值: auto  :   默认值.浏览器根

单击操作即将鼠标移动至某个对象

单击操作即将鼠标移动至某个对象,然后用右手食指按下鼠标左键后快速松开.单击操作常用于窗口和对话框中,例如单击超链接.勾选复选框.选中单选按钮以及单击命令按钮等,如下图所示为勾选"锁定任务栏"复选框. 双击即快速地连续两次按鼠标左键,该操作常用于启动程序.打开窗口或文件夹等.例如将鼠标指针移至"计算机"图标,双击该图标即可打开"计算机"窗口,如下图所示.

鼠标移到元素上指针变为不可用状态

鼠标移到元素上指针变为不可用状态:鼠标的指针状态与很多种,分别代表着不同的含义,下面介绍一下如何实现当鼠标悬浮于一个元素的时候,鼠标指针会变味不可用状态,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

鼠标移到图片变化的三种写法(可移植性强、代码少)

当鼠标移动到某个图片的时候,图片变化.当鼠标移出去的时候,图片变回来.下面是三种写法:第一种,也是最笨,最麻烦的写法,如下: 1 $(".web-footer2 .inner").each(function(){ 2 $(this).find("ul").eq(1).find("img").eq(0).hover(function(){ 3 $(this).attr("src","/img/footer-qq2.pn

图片淡入淡出代码,鼠标移上透明度变化

又一个图片透明度特效,鼠标移在图片上,图片的透明度就发生变化,最初的透明度为20,鼠标移上后透明度恢复正常,很明显的响应鼠标的图片特效,而且代码超简单,新手也能学会使用. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>石家庄伸缩门</title> </head>