这个功能用jquery如何实现

上面的这个图片是在天猫网站上面剪切下来的
就是当鼠标移到左边的时候，会在右边弹出详细信息这个详细信息如何生成？现在生成之后，点击进去，如何生成响应的产品详细信息

解决方案 »

  1.   

    用定位把那个先放到页面之外去，在hover的时候，进行重新定位，这样应该是可以做的，移开之后，在扔到页面之外去。
      

  2.   

    原来玩过，我用的是后台生成树结构，扔入XML，然后导航读取XML。
      

  3.   

     <button id="reset">手动重置页面元素</button><br/><br/>
      <div id="div1">我是diva</div>$(document).ready(function(){
       $("#reset").mouseover(function(){
    $("#div1").show().css("color","red");
       });
      });我简单的谢了一个实例，你按照这个试试~
      

  4.   

    感觉比较简单的做法就是预先加载好，然后通过事件变换display属性
      

  5.   

    这种 数据一般都是提交加载好的， 不可能每次都去请求服务器来加载 对应的分类，
    事先全部读出来 这是肯定的，至于前台的话用xml 先保存起来吧，不用全部加载到界面里面去，
    每次根据不同的参数去xml 里面去读对应的数据就好了，然后界面上再重新填充下
      

  6.   

    $(document).ready(function(){
       $("#reset").mouseover(function(){
            $("#div1").show().css("display","block");
       });
      });
      

  7.   

    下面这个就类似鼠标移入显示内容的代码了<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style>
    #div1 ul li{width:100px;height:30px;line-height:10px;background:#df0708;}
    #a,#b,#c{display:none;width:500px;height:400px;left:160px;top:15px;border:1px solid gray;position:absolute}
    a:hover{color:red}
      </style>
      <script>
    function $(id){
    return document.getElementById(id);
    }
    function move1(){
    $("a").style.display="block";
    $("b").style.display="none";
    $("c").style.display="none";

    }
    function out1(){
    $("a").style.display="none";
    } function move2(){
    $("b").style.display="block";
    $("a").style.display="none";
    $("c").style.display="none";
    }
    function out2(){
    $("b").style.display="none";
    } function move3(){
    $("c").style.display="block";
    $("b").style.display="none";
    $("a").style.display="none";
    }
    function out3(){
    $("c").style.display="none";
    }
      </script>
     </HEAD> <BODY>
      <div id="div1">
    <ul>
    <li onmouseover="move1()">1</li>
    <li onmouseover="move2()">2</li>
    <li onmouseover="move3()">3</li>
    </ul>
      </div>  <div id="a"onmouseout="out1()">
    <div onmouseover="move1()">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <br/>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>

        </div>
      </div>  <div id="b" onmouseover="move2()" onmouseout="out2()">
    <div onmouseover="move2()">
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    <a href="#">b1</a>
    <a href="#">b2</a>
    <a href="#">b3</a>
    <a href="#">b4</a>
    <br>
    </div>
      </div>  <div id="c" onmouseover="move3()" onmouseout="out3()">
    <div onmouseover="move3()">
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>
    <br/>
    <a href="#">c1</a>
    <a href="#">c2</a>
    <a href="#">c3</a>
    <a href="#">c4</a>    </div>
      </div>
     
     </BODY>
    </HTML>