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" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>鼠标悬停图像放大Demo</title> 8 <style type="text/css"> 9 .small img { 10 border: none; 11 margin: 10px; 12 width: 60px; 13 height: 60px; 14 } 15 .large { 16 width: 300px; 17 height: 300px; 18 } 19 </style> 20 <script src="jquery-1.5.2.js" type="text/javascript"></script> 21 <script type="text/javascript"> 22 $(document).ready(function(){ 23 //hover的第二个回调函数被省略了 24 //当鼠标指针悬停在上面时 25 $('.small a').hover( 26 function() { 27 var imgname = $(this).attr('href'); 28 // $(selector).fadeTo(speed,opacity,easing,callback) 29 //逐渐改变所有 <p> 元素的不透明度: 30 $('.large').fadeTo( 31 "slow", 0, 32 function() { 33 $('.large').attr('src', imgname); 34 } 35 ).fadeTo('slow', 1); 36 } 37 ) 38 }); 39 </script> 40 </head> 41 <body> 42 <div class="small"> 43 <a href="1.jpg"> 44 <img src="1.jpg" alt="图片1" /> 45 </a> 46 <a href="2.jpg"> 47 <img src="2.jpg" alt="图片2"/> 48 </a> 49 <a href="3.jpg"> 50 <img src="3.jpg" alt="图片3"/> 51 </a> 52 </div> 53 <img src="1.jpg" class="large" /> 54 </body> 55 </html>