jquery特效之商品浏览器（淡入淡出）

 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>
posted on 2017-01-21 21:44 Sharpest 阅读(189) 评论(0) 收藏举报