求一特效，网页上在一张图片上实现鼠标在该图片上有十字线效果。

思路页面上有一张图片，被一个DIV包含，
鼠标移动到DIV上触发事件
显示 十字线效果
十字线交点处是鼠标尖头上。哎 做JAVAWEB开发的苦逼的孩子求

解决方案 »

  1.   

     style="cursor:crosshair"这个就是鼠标的十字效果
      

  2.   


    <style type="text/css"> .div1
    {
      border:1px solid red ;
      width:300px;
      height:300px;
     cursor:crosshair ;
    }</style><div id="div1" class="div1">
    <img src="images/x6.png" style="width:160px;height:60px;"/>
    </div>
      

  3.   

    你要的是这个效果吗？
    <html>
    <head>
    <style>
    <!--
    #leftright, #topdown{
    position:absolute;
    left:0;
    top:0;
    width:2;
    height:2;
    layer-background-color:#6699cc;
    background-color:#6699cc;
    z-index:100;
    font-size:0px;
    }
    -->
    </style>
    <title>十字线</title>
    </head>
    <body>
    <div id="leftright" style="width:expression(document.body.clientWidth)"></div>
    <div id="topdown" style="height:expression(document.body.clientHeight)"></div>
    <script language="JavaScript">
    <!--
    var w = (window.innerWidth)?window.innerWidth:(document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth:document.body.offsetWidth;
    var h = (window.innerHeight)?window.innerHeight:(document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight:document.body.offsetHeight;if (document.all && !window.print){
    leftright.style.width=w;
    topdown.style.height=h;
    }
    else if (document.layers){
    document.leftright.clip.width=w;
    document.leftright.clip.height=5;
    document.topdown.clip.width=5;
    document.topdown.clip.height=h;
    }
    function followmouse1(){
    //move cross engine for IE 4+
    leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
    topdown.style.pixelTop=document.body.scrollTop
    if (event.clientX<document.body.clientWidth-2)
    topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
    else
    topdown.style.pixelLeft=document.body.clientWidth-2leftright.style.width=w-21;
    topdown.style.height=h-5;
    }
    function followmouse2(e){
    //move cross engine for NS 4+
    document.leftright.top=e.y+6
    document.topdown.top=pageYOffset
    document.topdown.left=e.x+6
    }
    if (document.all)
    document.onmousemove=followmouse1
    else if (document.layers){
    window.captureEvents(Event.MOUSEMOVE)
    window.onmousemove=followmouse2
    }
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    setTimeout("window.onresize=regenerate",400)
    }
    if ((document.all && !window.print)||document.layers)
    //if the user is using IE 4 or NS 4, both NOT IE 5+
    window.onload=regenerate2
    function show()
    {
    leftright.style.visiable = "";
    topdown.style.visiable = "";

    leftright.style.display = "";
    topdown.style.display = "";
    }function hidden()
    {
    leftright.style.visiable = "none";
    topdown.style.visiable = "none";

    leftright.style.display = "none";
    topdown.style.display = "none";
    }
    //-->
    </script>
    <img src="图片" width="300" height="300" onmousemove="show()" onmouseout="hidden()"></body></html>
      

  4.   

    <style type="text/css">
    #dv{position:relative;}
    #linex{height:1px;width:300px;position:absolute;left:0px;background:#000;overflow:hidden;display:none;}
    #liney{height:300px;width:1px;position:absolute;top:0px;background:#f00;overflow:hidden;display:none;}
    </style>
    <div id="dv"><img src="pic.jpg" id="img"/><div id="linex"></div><div id="liney"></div></div>
    <script>
    window.onload=function(){
      var img=document.getElementById('img'),linex=document.getElementById('linex'),liney=document.getElementById('liney');
      linex.style.width=img.offsetWidth+'px';
      liney.style.height=img.offsetHeight+'px';
      document.getElementById('img').onmousemove=function(e){
         e=e||window.event;
         linex.style.display=liney.style.display='block';
         linex.style.top=(e.offsetY||e.layerY)+'px';
         liney.style.left=(e.offsetX||e.layerX)+'px';
      }
    }
    </script>效果
      

  5.   

    就是设置个鼠标样式吧，再加上鼠标moveover事件　
      

  6.   

    1，2，3不符合要求。
    4楼的十字全屏了。
    5楼OK
    6楼。
    结了。
    我在JAVA版可以放300分，这里只有100分
    页面静态化留名 zhuchao 朱超 java j2ee javaee QQ 19810109 宁波