100分，求教求一简单效果

http://www.aa25.cn/243.shtml

解决方案 »

  1.   

    首先，设置一个div隐藏其次，onmouseover那个图片之后，设置那个div显示即可。如果需要加载数据的话，那么ajax最好了
      

  2.   


    <style>
    #demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
    #demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
    #enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
    </style>
    <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
     <img src="http://www.baidu.com/img/baidu_logo.gif">
    </div>
    <div id="enlarge_images"></div>
    <script>
    var demo = document.getElementById("demo");
    var gg = demo.getElementsByTagName("img");
    var ei = document.getElementById("enlarge_images");
    for(i=0; i<gg.length; i++){
     var ts = gg[i];
     ts.onmousemove = function(event){
      event = event || window.event;
      ei.style.display = "block";
      ei.innerHTML = '<img src="' + this.src + '" />';
      ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
      ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
     }
     ts.onmouseout = function(){
      ei.innerHTML = "";
      ei.style.display = "none";
     }
     ts.onclick = function(){
      window.open( this.src );
     }
    }
    </script>
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE>隐藏元素</TITLE>
     </HEAD>
    <script type="text/javascript">
    var show=function(){
    document.getElementById("two").style.display="block";//none   --彻底的删去了此标签，此布局会被抢占
    //visibility：hidden|visible;   --隐藏了此标签 还占用布局

    };
    var hidden=function(){
    document.getElementById("two").style.display="none";//block   --彻底的删去了此标签，此布局会被抢占
    };</script>
     <BODY>
     <div id="one" style="width:50px;height:50px;background-color : red" onmouseover="show()" onmouseout="hidden()">原来DIV</div>
      <div id="two" style="width:200px;height:200px;background-color:blue;display:none;">加载显示DIV</div>
     </BODY>
    </HTML>
      

  4.   

    1楼，应该写出了大概的意思了，只不过它这里的个img,而楼主要的是文字+图片<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
     <img src="http://www.baidu.com/img/baidu_logo.gif">    [red]//把这段替换成你需要的内容就可以了！！！[/red]
    </div>
      

  5.   

    直接另存本web页面然后看看就可以了
      

  6.   

    当鼠标离开 A区域和B区域时,B区域隐藏 这个效果最重要的，怎么没人说到点子上。。
      

  7.   

    正确吗？  把鼠标放在B区域，你那代码 B区域显示吗？？
    当鼠标离开 A区域和B区域时,B区域隐藏注意看”和“
      

  8.   

    ========================================
    不好意思，没看清楚Try this demo
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE>隐藏元素</TITLE>
     </HEAD>
    <script type="text/javascript">
        var show=function(){
            document.getElementById("two").style.display="block";//none   --彻底的删去了此标签，此布局会被抢占
            //visibility：hidden|visible;   --隐藏了此标签 还占用布局
            
        };
        var hidden=function(){
            document.getElementById("two").style.display="none";//block   --彻底的删去了此标签，此布局会被抢占
        };</script>
     <BODY>
     <div id="one" style="width:50px;height:50px;background-color : red" onmouseover="show()" onmouseout="hidden()">原来DIV</div>
      <div id="two" style="width:200px;height:200px;background-color:blue;display:none;" onmouseover="show()"  onmouseout="hidden()">加载显示DIV</div>
     </BODY>
    </HTML>
      

  9.   

    <div id="one" style="width:50px;height:50px;background-color : red" onmouseover="show()" onmouseout="hidden()">原来DIV</div>
      <div id="two" style="width:200px;height:200px;background-color:blue;display:none;" onmouseover="show()"  onmouseout="hidden()">加载显示DIV</div>大家看看红色的事件，是不是有冲突
    还有个问题id="one"  id="two"  中间有空隙的时候，很容易达不到预期的效果
      

  10.   

    =====================
    你可以查看下CSDN的源代码，虽然你在头像上面，其实头像右边那快也是在DIV里面包含着呢，只是里面有个头像而已，但事件是对于DIV来说的，所以你试试CSDN的效果。你如果向上，或向下再去B区一样不行！
      

  11.   

    拿人之鱼不如学人之渔
    lz,1楼的已经都给出了思路，自己再稍微修改下就OK了，如果把全部代码都给你实现了，下面我也不说了
      

  12.   

    这个不难啊，两个div，然后加点js就行了
      

  13.   

    http://topic.csdn.net/u/20090422/02/02ac4e89-eaa7-46c7-85ab-1ce6d9e1a255.html
      

  14.   

    直接另存本页面就行了,看看CSDN是如何做的就行了
      

  15.   

    <script>
    <!--
    var a1=document.getElementById("a")
    var c1=document.getElementById("c")
    function show()
    {
     c1.style.display="block";
    }
    function hide()
    {
    c1.style.display="none";
    }
    -->
    </script>
    <div id="a" onmouseout="hide">
     <div id="b" onmouseover="show()">bbbb</div>
     <div id="c">cccc</div>
    </div>id="a"  不是包含b和c吗？？意思就是a=b+c 
    对a触发onmouseout事件  即 只有鼠标离开b和c的范围才触发
    但是事实并非如此，迷惑中。。
      

  16.   

    我就不明白你还迷茫什么？？？
    真对你所谓的 a b c 写了个小DEMO 。再迷茫我就就纳闷了
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE>隐藏元素</TITLE>
     </HEAD>
    <script type="text/javascript">
        var show=function(){
            document.getElementById("c").style.display="block";//none   --彻底的删去了此标签，此布局会被抢占
            //visibility：hidden|visible;   --隐藏了此标签 还占用布局
            
        };
        var hidden=function(){
            document.getElementById("c").style.display="none";//block   --彻底的删去了此标签，此布局会被抢占
        };</script>
     <BODY>
     <div id="a" style="width:200px;" onmouseover="show()"  onmouseout="hidden()">
     <div id="b" style="width:50px;height:50px;background-color : red" >原来DIV</div>
      <div id="c" style="width:200px;height:200px;background-color:blue;display:none;" >加载显示DIV</div>
     </div>
     </BODY>
    </HTML>
      

  17.   

    鼠标滑过图片出现大图片提示层效果js代码http://www.aa25.cn/243.shtml