• 广西高校东盟留学生包粽子欢庆端午节 2019-05-19
  • 龙船礼 有讲究 百岁龙 抖精神 2019-04-25
  • 认真学习宣传贯彻党的十九大精神:社区宣讲热腾腾 2019-04-22
  • 台湾学者黄一农:书院不是“盘”下名号来挣钱的 2019-04-20
  • 喜迎十九大 砥砺奋进的五年 2019-04-20
  • 【沙湾风光】百花盛开 迎六月 2019-04-08
  • 在“街角博物馆”中找寻来自唐朝的“雕刻时光” 2019-04-02
  • 香港举办财新峰会 探讨新格局下新机遇 2019-04-02
  • 欧阳卫民:冀粤港深化合作 打造国际一流湾区 2019-03-24
  • 租赁共有产权房供地将占新增量30% 2019-03-22
  • 国务院关税税则委员会关于对原产于美国500亿美元进口商品加征关税的公告 2019-03-18
  • 江西绿色经济智创未来 2019-03-16
  • 朴树现场版《平凡之路》,万人合唱震撼全场! 2019-03-08
  • 也许你又会说,正是由于搞市场经济将人们的觉悟水平拉低了,是否是这样还需讨论,生产力的发展与人们的觉悟水平需齐头并进,但这能够做到吗?在搞市场经济的基础上,人们尤 2019-03-01
  • 亿利资源集团获第十二届人民企业社会责任奖年度年度环保奖 2019-03-01
  • 当前位置:体彩江苏7位数18150 > JS >

    江苏7位数开奖结果:Jquery实现鼠标移到某个对象,在旁边显示层

     体彩江苏7位数18150 www.b5pro.com 

    当鼠标移到某个地方的时候,在旁边飘出一个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');

    CopyRight © 2012 站长网 编程知识问答 体彩江苏7位数18150 All Rights Reserved
    部份技术文章来自网络,
  • 广西高校东盟留学生包粽子欢庆端午节 2019-05-19
  • 龙船礼 有讲究 百岁龙 抖精神 2019-04-25
  • 认真学习宣传贯彻党的十九大精神:社区宣讲热腾腾 2019-04-22
  • 台湾学者黄一农:书院不是“盘”下名号来挣钱的 2019-04-20
  • 喜迎十九大 砥砺奋进的五年 2019-04-20
  • 【沙湾风光】百花盛开 迎六月 2019-04-08
  • 在“街角博物馆”中找寻来自唐朝的“雕刻时光” 2019-04-02
  • 香港举办财新峰会 探讨新格局下新机遇 2019-04-02
  • 欧阳卫民:冀粤港深化合作 打造国际一流湾区 2019-03-24
  • 租赁共有产权房供地将占新增量30% 2019-03-22
  • 国务院关税税则委员会关于对原产于美国500亿美元进口商品加征关税的公告 2019-03-18
  • 江西绿色经济智创未来 2019-03-16
  • 朴树现场版《平凡之路》,万人合唱震撼全场! 2019-03-08
  • 也许你又会说,正是由于搞市场经济将人们的觉悟水平拉低了,是否是这样还需讨论,生产力的发展与人们的觉悟水平需齐头并进,但这能够做到吗?在搞市场经济的基础上,人们尤 2019-03-01
  • 亿利资源集团获第十二届人民企业社会责任奖年度年度环保奖 2019-03-01
  • 中国体彩网11选5战家 134jk开奖现场手机报码 湖南幸运赛车app 网络真钱游戏 qq分分彩平台 湖南幸运赛车开奖记录 北京pk10官方正品网站 彩票大奖故事都是假的 3d试机号体彩三试机号 360七星彩票走势图表 新疆时时彩三基本走势 排三走势图 二分彩app 刮刮乐扑克牌 四川竞彩大奖在哪里领 新疆时时彩-计划群