javascript收藏之photoGallery
来源：互联网 发布：ps抠图软件 编辑：程序博客网 时间：2024/06/06 08:36
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'photogallery.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link href="css/global.css" rel="stylesheet" type="text/css"> <link href="css/gallery.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#gallery img').each(function(i) { var imgFile = $(this).attr('src'); var preloadImage = new Image(); var imgExt = /(\.\w{3,4}$)/; preloadImage.src = imgFile.replace(imgExt,'_h$1'); $(this).hover( function() { $(this).attr('src', preloadImage.src); }, function () { var currentSource=$(this).attr('src'); $(this).attr('src', imgFile); }); // end hover }); // end each $('#gallery a').click(function(evt) { //don't follow link evt.preventDefault(); //get path to new image var imgPath = $(this).attr('href'); //get reference to old image var oldImage = $('#photo img'); //check to see if they're the same image //create HTML for new image var newImage = $('<img src="' + imgPath +'">'); //make new image invisible newImage.hide(); //add to the #photo div $('#photo').prepend(newImage); //fade in new image newImage.fadeIn(1000); //fade out old image and remove from DOM oldImage.fadeOut(1000,function(){ $(this).remove(); }); }); // end click $('#gallery a:first').click();}); // end ready</script> </head> <body id="twoCol"><div id="container"> <div id="banner"><img src="images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div> <div id="contentWrap"> <div id="main"> <h1>Photo Gallery </h1> <div id="gallery"><a href="images/large/blue.jpg"><img src="images/small/blue.jpg" width="70" height="70" alt="Blue"></a><a href="images/large/yellow.jpg"><img src="images/small/yellow.jpg" width="70" height="70" alt="Yellow"></a><a href="images/large/green.jpg"><img src="images/small/green.jpg" width="70" height="70" alt="Green"></a><a href="images/large/orange.jpg"><img src="images/small/orange.jpg" width="70" height="70" alt="Orange"></a> <a href="images/large/purple.jpg"><img src="images/small/purple.jpg" width="70" height="70" alt="Purple"></a><a href="images/large/red.jpg"><img src="images/small/red.jpg" width="70" height="70" alt="Red"></a></div> <div id="photo"> </div> <p class="credit">Photos by <a href="http://www.morguefile.com/forum/profile.php?username=alin">Alin Nan</a></p></div> <div id="sidebar"> <h2>Script 7.2</h2></div> </div> <div id="footer"><em>“Building Interactive Web Sites with JavaScript”</em></div></div></body></html>
