我需要在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息

解决方案 »

  1.   


    <!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>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>无标题 1</title>
    </head><body>
    <div style=" font-size:20px">
    我需要在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="show"></div>
    </body>
    <script type="text/javascript">
        //记录选区大小,位置
        var rect = {
            left:-1,
            top:-1,
            width:-1,
            height:-1,
            start_left:-1
        };
        //这个我就不说了……
        function $(id)
        {
            return document.getElementById(id);
        }
        //当选区改变时,改变选区的属性
        document.onselectionchange=function(){
            var sel = document.selection.createRange();
            rect.left = sel.boundingLeft;
            rect.top = sel.boundingTop;
            rect.width = sel.boundingWidth;
            rect.height = sel.boundingHeight;
            rect.start_left = sel.offsetLeft;
            rect.end_left = sel.offsetTop;
        };
        //当鼠标移动时,得到鼠标的绝对位置
        document.onmousemove = function(){
            var position = getMouse(window.event);
            if(ptInRect(rect,position))
            {
                 document.title = "鼠标在选区中!!!!!!!!!!!";
                 $("show").innerHTML="选择的文字是--->"+document.selection.createRange().text;
            }
            else
                document.title = "鼠标不在选区中";
          
        }
        //判断鼠标是否在矩形(也就是选区,选区是一个矩形)内
        function ptInRect(rect,pt)
        {
            if(pt.x>rect.left&&pt.x<rect.left+rect.width&&pt.x>rect.start_left)
                if(pt.y>rect.top&&pt.y<rect.top+rect.height)
                    return true;
            return false;
        }
        //得到鼠标的位置
        function getMouse(ev)
        {
             if(ev.pageX || ev.pageY)
             {         
                  return {x:ev.pageX, y:ev.pageY};
             }
             return {         
                  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
                  y:ev.clientY + document.body.scrollTop  - document.body.clientTop     
             }; 
        } 
    </script></html>
      

  2.   

    非常感谢,大家看一下效果怎么样啊,呵呵http://news.truelove8.net/html/yulekuaixun_486_1.html