怎么使用Javascript或jquery鼠标移动到一张图片时变为另一张图片图片，图片产生颤抖的效果

我想做个Javascript的特效jquery也可以主要实现鼠标移动到小的图片上第二张图片可以显示出来，最好还有颤动的效果麻烦各位高人帮帮忙

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

可以先得到这个图片的坐标(x,y), 然后写一个函数来改变(x,y)的值，上下左右都要有，然后使用setTimeout()，来调用这个函数达到效果
这里由一个闪屏的例子<html>
  <head>
    <title>闪屏</title>    <style type="text/css">
     *{
     font-size:12px;
     font-family:宋体, Arial;
     font-weight:normal;
     color:#333;
     }
     textarea{
     width:100%;
     height:98%;
     border:1px solid black;
     }
    </style>

    <script type="text/javascript">
     function resizeWindow(){

     var windowWidth = 480, windowHeight = 360;
     window.moveTo((screen.availWidth - windowWidth)/2, (screen.availHeight - windowHeight)/2);
     window.resizeTo(windowWidth, windowHeight);
     }

     function shakeWin(stepId){
     var stepId;
     if(!stepId){
     stepId = 0;
     }
     switch(stepId){
     case 0:
     window.moveBy(-5,-5);
     break;
     case 1:
     window.moveBy(10,0);
     break;
     case 2:
     window.moveBy(-10,10);
     break;
     case 3:
     window.moveBy(10,0);
     break;
     case 4:
     window.moveBy(-5,-5);
     break;
     default :
     return;
     }
     stepId++;
     setTimeout("shakeWin("+stepId+");",20);
     }

     function $(str){
     return document.getElementById(str);
     }

     window.onload = resizeWindow;
    </script>
  </head>

  <body>
     <input type="button" value="点击查看振动闪屏效果" onclick="shakeWin();">
  </body>
</html>
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function(){

             $('#imgdiv img').mouseover(function(){
                $("#imgdiv img").effect("shake",null,500,function(){
                    $('#imgdiv img').attr("src","images/lyf1.jpg");
                });

             });

        })
    </script><style type="text/css">

        #imgdiv img
        {
            width:300px;
            height:200px;
        }

    </style>
</head>
<body>  <div id="imgdiv">

   <img src="images/lyf0.jpg" />

   </div>
</body>
</html>
看看这个行不行，比较简单
http://www.sharejs.com/showdetails-350.aspx
我写了一个简单的例子。
为了赶时间写得比较粗糙。
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="js/jslib/jquery.js"></script>
<title>test</title>
<style>
img,body,html{ margin:0; padding:0}
</style>
</head><body><div id="imgpanel" style="padding:200px">
<img id="img1" src="images/small_car_1.jpg" bigimg="images/car_1.jpg"/>
    <img id="img2" src="images/small_car_2.jpg" bigimg="images/car_2.jpg"/>
</div><script language="javascript"> $(document).ready(function(){
var imgarr = $("#imgpanel").find("img");
for(var i=0;i<imgarr.length;i++){
$(imgarr[i]).bind("mousemove", function(){
   doImgOver(this);
});
}
});

function doImgOver(imgobj){
var id = $(imgobj).attr("id");
var bigid = id+"_big";
var bigsrc = $(imgobj).attr("bigimg");

var offset = $(imgobj).offset();
var left = offset.left;
var top = offset.top;
var width = $(imgobj).width();
var height = $(imgobj).height();

var tmpBigImgId = id+"_tmpimg";
var tmpBigimg = "<img id='"+tmpBigImgId+"' style='display:none' src='"+bigsrc+"'/>";
$(document.body).append(tmpBigimg);

var bigImgWidth = $("#"+tmpBigImgId).width();
var bigImgHeight = $("#"+tmpBigImgId).height();
$("img").remove("#"+tmpBigImgId);

var newLeft = left - (bigImgWidth-width)/2;
var newTop = top - (bigImgHeight-height)/2;

var sadowdiv='';
var sadowid = id+"_sadow";
sadowdiv+='<div id="'+sadowid+'" style="background:#cccccc;position:absolute; left:'+left+'px; top:'+top+'px; width:'+width+'px; height:'+height+'px;">';
sadowdiv+='</div>';

var divStr = "";
divStr+='<div id="'+bigid+'" style="position:absolute; left:'+newLeft+'px; top:'+newTop+'px; width:'+bigImgWidth+'px; height:'+bigImgHeight+'px;"">';
divStr+='<img src="'+bigsrc+'"/>';
divStr+='</div>';

$(document.body).append(sadowdiv);

$("#"+sadowid).animate({
width: bigImgWidth,
height:bigImgHeight,
left:newLeft,
top:newTop
}, {
queue: false,
duration: "fast",
complete :function(){
$("div").remove("#"+sadowid);
$(document.body).append(divStr);
$("#"+bigid).bind("mouseout", function(){
doImgOut(this);
});
}
});

}

function doImgOut(obj){
var id = $(obj).attr("id");
$("div").remove("#"+id);
}</script>
</body>
</html>