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" "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>
posted on 2017-01-18 23:02 Sharpest 阅读(132) 评论(0) 编辑收藏举报