jquery实现小图片方法

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>点小图看大图</title>
 8     <!--     <style type="text/css">
 9             .small img {
10                 border: none;
11                 margin: 10px;
12                 width: 60px;
13                 height: 60px;
14             }
15         </style> -->
16         <script src="jquery-1.5.2.js" type="text/javascript"></script>
17         <script language="javascript" type="text/javascript">
18             var data = {
19                 "1_small.jpg": ["1.jpg", "美女1"],
20                 "2_small.jpg": ["2.jpg", "美女2"],
21                 "3_small.jpg": ["3.jpg", "美女3"]
22             };  //Key:Value;
23             $( function () {
24                 $.each(data, function (key, value) {
25                     //初始化最后一个div为隐蔽
26                     $("div").last().hide();
27                     //key是小图的地址；
28                     var smallPath = $("<img src='" + key + "'/>").css("margin", "5px").css("padding", "2px").css("border", "1px solid #000");
29                     //设置大图地址和名称；
30                     bigImgPath = smallPath.attr("bigMapPath", value[0]);
31                     bigImgName = smallPath.attr("bigMapName", value[1]);
32 
33                     //给小图添加事件
34                     smallPath.mouseover( function () {
35                         //最后一个div淡入效果
36                         $("div").last().fadeIn("slow");
37                         //获取大图地址
38                         $("#show").attr("src", $(this).attr("bigMapPath"));
39                         //获取大图名称并设置样式
40                         $("#imgTitle").text($(this).attr("bigMapName")).css("background", "#ebf1de").css("padding", "10px").css("margin-bottom", "10px");
41                     });
42                     smallPath.mouseout( function () {
43                         //指定最后一个div；
44                         $("div").last().fadeOut("slow");
45                     });
46                     //.first方法，指定第一个DIV添加小图；（过滤器）
47                     $("div").first().append(smallPath);
48                 });
49             });
50         </script>
51     </head>
52     <body>
53         <div class="column">
54         </div>
55         <div class="column">
56             <p id="imgTitle">
57             </p>
58             <img id="show" src="" alt="" />
59         </div>
60     </body>
61 </ html>
posted on 2017-01-18 23:06 Sharpest 阅读(188) 评论(0) 收藏举报