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 a { 10 text-decoration: none; 11 outline: none; 12 } 13 #shelf { 14 border: 1px dashed; 15 width: 270px; 16 } 17 .small img { 18 border: none; 19 margin: 10px; 20 width: 60px; 21 height: 60px; 22 } 23 .large { 24 width: 160px; 25 height: 160px; 26 } 27 .hover { 28 color: blue; 29 background-color: lightblue; 30 } 31 </style> 32 <script src="jquery-1.5.2.js" type="text/javascript"></script> 33 <script type="text/javascript"> 34 $(document).ready(function(){ 35 $('td').find('p').css({'font-size':8, 'font-style':'italic', 'font-weight':'bold'}); 36 //鼠标悬停在小图片上 37 $('.small').hover( 38 function(){ 39 $(this).parent().addClass('hover'); 40 var imgpath= $(this).attr('href'); 41 //实现淡入淡出效果 第一次fadeTo实现隐藏 第二次fadeTo实现显示 42 $('.large').fadeTo( 43 'slow', 0, 44 function(){ 45 $('.large').attr('src', imgpath); 46 } 47 ).fadeTo('slow', 1);//由完全透明到完全不透明 48 }, 49 function(){ 50 $(this).parent().removeClass('hover'); 51 } 52 ); 53 }); 54 </script> 55 </head> 56 <body> 57 <div id="shelf"> 58 <table border=0> 59 <tr> 60 <td width=150 align=center> 61 <a href="1.jpg" class="small"> 62 <img src="1.jpg" /> 63 </a> 64 <p> 65 Model1: $100 66 </p> 67 </td> 68 <td rowspa n="4" width=200 align=center> 69 <img src="1.jpg" class="large" /> 70 </td> 71 </tr> 72 73 <tr> 74 <td width=150 align=center> 75 <a href="2.jpg" class="small"> 76 <img src="2.jpg" /> 77 </a> 78 <p> 79 Model2: $200 80 </p> 81 </td> 82 </tr> 83 84 <tr> 85 <td width=150 align=center> 86 <a href="3.jpg" class="small"> 87 <img src="3.jpg" /> 88 </a> 89 <p> 90 Model3: $250 91 </p> 92 </td> 93 </tr> 94 </table> 95 </div> 96 </body> 97 </html>