jquery中如何实现点击鼠标,图标显示在鼠标所在的位置<div id="divtest">test<div><span onclick="">点击显示1</span><span onclick="">点击显示2</span><span onclick="">点击显示3</span>用jquery如何实现,点击不同的“点击显示”文字的时候,divtest显示在鼠标所在的位置div的样式已设置为absolute谢谢

解决方案 »

  1.   

    function popUp() {
    newX = window.event.x + document.body.scrollLeft
    newY = ((window.event.y)*(-1) + document.body.scrollTop)*(-1)
    menu = document.all.item//你要显示的图标
      if ( menu.style.display == ""){
        menu.style.display = "none" 
      }
      else {
         menu.style.display = ""
      }
        menu.style.pixelLeft = newX+10//根据显示的调整
        menu.style.pixelTop = newY-23
    }<div id = "item">AAAAAA</div>
      

  2.   

    menu = document.all.divtest //你要显示的图标 <div id = "divtest" style="display:none">test  </div>和我们的项目里的差不多 ,就是 点击 一张图,在它右侧 显示注释
      

  3.   

    能用jquery吗
    newX = window.event.x + document.body.scrollLeft 
    newY = ((window.event.y)*(-1) + document.body.scrollTop)*(-1)这些东西我看得难受,要能支持多种浏览器的
      

  4.   

    $("span").click(function(){
       $("divtest").css("top",event.clientY+$(this).scrollTop())
                   .css("left",event.clientX+$(this).scrollLeft())
                   .CSS("position","absolute")
    });
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
     </head>
     <body>
    <div id="divtest" style="width:150px;height:150px;background-color:#FFCC66;position:absolute;display:none"></div>
    <span id="span" style="width:150px; height:35px; background-color:#006600;position:absolute;left:100px"></span>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    <!--
    $(function(){
    $('#span').click(function(){
    var offset = $(this).offset();
    $('#divtest').css({'left':offset.left + 'px', 'top':($(this).height() + offset.top) + 'px'}).show();
    });
    });
    //-->
    </script>
     </body>
    </html>