zoukankan      html  css  js  c++  java
  • jquery鼠标放上去显示悬浮层即弹出定位的div层

    <div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')">鼠标放上去1</a></div>
    <div id="div1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')" style="display: none;  218px; font-size: 12px; color: #333; border: 1px solid #FF6600; border-top: none; margin: 0px; background-color: #fff; position: absolute">
        <ul>
            <li><a href="#">运动</a></li>
            <li><a href="#">钟表</a></li>
            <li><a href="#">男装</a></li>
            <li><a href="#">钻石饰品</a></li>
            <li><a href="#">女装</a></li>
            <li><a href="#">金银投资</a></li>
        </ul>
    </div>
    
    <script>
        var ishide = 0;//判断是否需要隐藏div
        function show(id1, id2) {
            var obj1 = $("#" + id1 + "");
            var obj2 = $("#" + id2 + "");
            if (ishide == 0) {
                ishide = 1;
            }
            $(obj2).css("display", "block");
    
            //var X = obj1.offset().top;
            //var Y = obj1.offset().left;
            //$(obj2).offset({ top: X + 20, left: Y }) 
            //$(obj2).css("left", X);
            //$(obj2).css("top", Y + 10);
        }
        function hide(id2) {
            ishide = 0;
            setTimeout(hide2, 400, id2);
        }
        function hide2(id2) {
            var obj2 = $("#" + id2 + "");
            if (ishide == 0) {
                $(obj2).css("display", "none");
            }
        }
    </script>
    

    <script language="javascript" src="jquery-1.4.2.min.js"></script>
    <script>
    function show(obj,id) {
    var objDiv = $("#"+id+"");
    $(objDiv).css("display","block");
    $(objDiv).css("left", event.clientX);
    $(objDiv).css("top", event.clientY + 10);
    }
    function hide(obj,id) {
    var objDiv = $("#"+id+"");
    $(objDiv).css("display", "none");
    }
    </script>

    <!--http://www.ablanxue.com/prone_3421_1.html-->

    <div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">
    提示1效果
    </div>
    <div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;">
    提示2效果
    </div>

    <a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>
    <br><br><br><br><br>
    <a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>

  • 相关阅读:
    有Blog的日子
    Android应用开发基础篇(6)Service
    Android应用开发基础篇(7)BroadcastReceiver
    Android应用开发基础篇(4)TabHost(选项卡)
    Android应用开发基础篇(5)Handler与多线程
    Android应用开发提高篇(2)文本朗读TTS(TextToSpeech)
    Android应用开发基础篇(9)SharedPreferences
    Android应用开发基础篇(8)SurfaceView
    Android应用开发基础篇(3)ListView
    Android应用开发基础篇(2)Notification(状态栏通知)
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/10523844.html
Copyright © 2011-2022 走看看