您的位置:首页 > Web前端 > JQuery

jquery 移动显示在鼠标下面边框设计

2016-09-01 17:45 344 查看
   <script type="text/javascript" src="jquery.js"></script>
  <script> function boxClose() {            document.getElementById("divJobseekerEmailOpenBox").style.display = "block";        }  $(document).ready(function() {            var objImg = document.getElementById("imgJobseekerEmailOpenBox");            var obj = document.getElementById("divJobseekerEmailOpenBox");            obj.style.display = "none";            $("#imgJobseekerEmailOpenBox").bind("mouseover", function() {                var isIE = (document.all) ? true : false;                var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);                obj.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute";
                obj.style.display = "block";
                if (isIE) {                    obj.style.top = objImg.offsetTop + objImg.offsetHeight;                }                else {
                    obj.style.top = objImg.offsetTop + objImg.offsetHeight + "px";                    //alert(obj.style.top);                }
                obj.style.left = 0;// -objImg.clientWidth + objImg.clientLeft;                //alert(obj.style.left);            });

            $("#" + txtEmail).liangsky_emailSuggest({ topCount: 10, listAuto: true, listHeight: 18, listMinWidth: 200 });        });

</script> <div style="float: left; width: 73px;position: relative"  >            <div id="imgJobseekerEmailOpenBox" onclick="cli()">                <img src="http://image3.job88.com/jobseeker/images/bg_2010_11.jpg" border="0" onmouseout ="javascript:boxClose();" /></div>            <div id="divJobseekerEmailOpenBox" style="border: 1px solid #a5a5a5; line-height: 20px;padding-right: 5px; padding-left: 2px; padding-bottom: 1px; padding-top: 5px;  width: 70px; background-color: #ffffff; height: 100px;top:0px; display:none">               <span  onmouseover="" >sina邮箱</span><br />                <span  onmouseover="javascript:boxClose();" >foxmail邮箱</span><br />                <span onmouseover="javascript:boxClose();">gmail邮箱</span><br />                <span onmouseover="javascript:boxClose();" >hotmail邮箱</span><br />                <span onmouseover="javascript:boxClose();" >yahoo邮箱</span>                 </div>        </div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐