1.
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>
