javascript收藏之photoGallery

最新推荐文章于 2024-09-30 15:23:15 发布

huangzihao100

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量480

点赞数

文章标签： javascript stylesheet image function div reference

<%@ 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>