一个简单的js(jquery)效果

请问哪个有这样的特效。。点一张小图片，这张小图变高亮，并链接显示另一个大图片。。谢谢哪位提供代码 
 

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
    <script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
       <script type="text/javascript">
       $(document).ready(function () {
    $('img').each(function(){$(this).css("opacity",".6")});
    var ei=$("#bigdiv")
    $('img').mouseover(function()
    {
        ei.html('<img style="border:1px solid gray;" width=200px height=200px src="' + this.src + '" />').show();
          $(this).animate({
    opacity:"1"
    })
    }).mouseout(function()
    {
    $(this).animate({
    opacity:".6"
    })
    ei.hide();
    });
        });
       </script>
    </head>
    <body style="background-color:Black">
        <form id="form1" runat="server">
        <div>
        <img src="images/0.gif" id="0" />
        <img src="images/1.gif" id="1" />
        <img src="images/2.gif" id="2" />
        <img src="images/3.gif" id="3" />
        <img src="images/4.gif" id="4" />  
        <img src="images/5.gif" id="5" />  
        </div>
       <div id="bigdiv" style="width:200px;height:200px;position:absolute;left:500px;top:250px;"  align="center"></div> 
        </form>
    </body>
    </html>
      

  2.   

    上面的把jq的库连对，效果就可以出来<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
      

  3.   

    JQUERY 放大镜。
    <!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>鼠标滑过图片出现大图片提示层</title>  
        <style type="text/css">  
         #demo{overflow:hidden;width:120px;text-align:center;padding:10px;}   
         #demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}   
         #bigimage{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}   
        </style>  
    </head>  
    <body>  
    <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">  
    <img alt="美女" src="../img/123592LD140-1KT7.jpg" />  
    </div>  
    <div id="bigimage"></div>  
    <script type="text/javascript">  
    var demo = document.getElementById("demo");   
    var gg = demo.getElementsByTagName("img");   
    var ei = document.getElementById("bigimage");   
    for(var i=0; i<gg.length; i++){   
     var ts = gg[i];   
     ts.onmousemove = function(event){   
      eventevent = 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>  
    </body>  
    </html>