1。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>鼠标悬停时放大图标本身</title> 8 <style type="text/css"> 9 /* 10 *.small { 11 * text-align: center; /*该属性对FF和IE都有效*/ 12 .small { 13 position:relative; 14 margin: auto; 15 text-align: center; 16 } 17 18 a { 19 text-decoration: none; 20 outline: none; 21 } 22 img { 23 border: 0; 24 width: 90px; 25 height: 90px; 26 } 27 </style> 28 <script src="jquery-1.5.2.js" type="text/javascript"></script> 29 <script type="text/javascript"> 30 $(document).ready(function(){ 31 $('img').hover( 32 function(){ 33 $(this).css({width:120,height:120}); 34 }, 35 function(){ 36 $(this).css({width:90,height:90}); 37 } 38 ); 39 }); 40 </script> 41 </head> 42 <body> 43 <div id="bar"> 44 <div class="small"> 45 <a href="#"><img src="1.jpg" /></a> 46 <a href="#"><img src="2.jpg" /></a> 47 <a href="#"><img src="3.jpg" /></a> 48 </div> 49 </div> 50 </body> 51 </html>
