含羞默默一张一合效果实验版，现在有多方面各种问题，会继续美化，敬请期待。。。
<!DOCTYPE html> <html> <head> <title>含羞默默一张一合效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://files.cnblogs.com/kuikui/jquery.js"></script> <style type="text/css"> *{margin:0px;padding:0px;} #test{800px; height: 600px; margin: 30px auto 0px; overflow: hidden; position: relative;} #test span{display: block; position: absolute; } </style> </head> <body> <div id="test"></div> <script type="text/javascript"> var getRandomColor = function(){ return '#' + (function(color){ return (color += '0123456789abcdef'[Math.floor(Math.random()*16)]) && (color.length == 6) ? color : arguments.callee(color); })(''); } function creSpan(n,mpId){ this.n=n; var barr = new Array(); var mSpan = document.createElement("span"); var pId = mpId[0]; pId.appendChild(mSpan); pIdWidth = pId.clientWidth; pIdHeight = pId.clientHeight; var tmpNum = parseInt(50 + Math.random()*100); with(mSpan.style){ width = tmpNum + "px"; height = tmpNum + "px"; left = parseInt(Math.random()*(pIdWidth-150))+"px"; top = parseInt(Math.random()*(pIdHeight-150))+"px"; background = getRandomColor(); } var mwidth =0; var mheight =0; $(mpId).find("span").eq(n).mouseover(function(){ mwidth =$(this).width(); mheight = $(this).height(); $(this).animate({ "-=50px", height:"-=50px", left:"+="+parseInt(mwidth-50)/2+"px", top:"+="+parseInt(mheight-50)/2+"px" },3000,function(){ barr[n]=true; }); }); mpId.mousemove(function(){ if(barr[n]){ barr[n]=false; $(this).find("span").eq(n).animate({ "+=50px", height:"+=50px", left:"-="+parseInt(mwidth-50)/2+"px", top:"-="+parseInt(mheight-50)/2+"px" },3000); } }); } </script> <script type="text/javascript"> $(function(){ var arr = new Array(); var test = $("#test"); for(var i=0;i<10;i++){ arr[i] = new creSpan(i,test); } }); </script> </body> </html>
运行代码