<!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 type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <title>仿youtube菜单</title> <style type="text/css">*{margin:0; padding:0;} .contain{width:960px; margin:0 auto; text-align:center; font-weight:bold; font-size:100px; position:relative;} .left{ width:300px; margin-right:10px; float:left; } .left .leftboxs{ height:200px;background:#ccc; line-height:200px; position:relative;} .left .leftboxs div{ position:absolute;width:300px; height:200px;} .left .faterB{ height:500px; margin-top:10px; line-height:500px;} .left .faterB div{ height:500px;} .fatherC{ float:right; background:#ccc; height:710px; width:650px; line-height:710px;}</style> </head> <body> <div class="contain"> <div class="left"> <div class="leftboxs"> <div id="A">A</div> </div> <div class="leftboxs faterB"> <div id="B">B</div> </div> </div> <div class="fatherC"> <div id="C">C</div> </div> </div> <script type="text/javascript">function zoom(id,ratex,ratey){ var obj=document.getElementById(id); var w=obj.clientWidth; var h=obj.clientHeight; obj.οnmοuseοver=function(){ this.style.width=w*1.25+'px'; this.style.height=h*1.25+'px'; this.style.zIndex='1'; this.style.background='yellow'; } obj.οnmοuseοut=function(){ this.style.width=w+'px'; this.style.height=h+'px'; this.style.zIndex=''; this.style.background='#ccc'; } } zoom('A',1.25,1.25); zoom('B',1.25,1.25); zoom('C',1.25,1.25);</script> </body> </html>