zoukankan      html  css  js  c++  java
  • 鼠标移动时缩小图片显示说明

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
    <title>jQuery Zoom-Info - AddyOsmani.com</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css"></link>
    <style>
    
    .galleryContainer {width: 1024px;}
    .galleryImage { background-color:black; width:325px; height:260px; overflow:hidden; margin:5px; float:left;}
    .info    { margin-left:10px; font-family:arial;padding:3px;}
    .info h2 { color:gray;}
    .info p { color:white}
    .clear { clear:both; margin-top:10px;}
    
    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.galleryImage').hover(
        function(){
            $(this).find('img').animate({200, marginTop:10, marginLeft:10}, 500);
        },
        function(){
            $(this).find('img').animate({325, marginTop:0, marginLeft:0},300);
        });
    });
    </script>
    
    </head>
    <body>
        
    <div class="galleryContainer">
    
    <!--galleryEntry-->    
      <div class="galleryImage">
          <img src="images/image01.jpg"></img>
          <div class="info">  
              <h2>Taylor Swift</h2>
              <p>
                  Taylor Alison Swift (born December 13, 1989) is an American country pop singer-songwriter and actress.
              </p>
          </div>
        </div>
    <!--end galleryEntry-->  
          
      
    <!--galleryEntry-->    
      <div class="galleryImage">
          <img src="images/image02.jpg"></img>
          <div class="info">  
              <h2>Rihanna</h2>
              <p>
                  Rihanna (born February 20, 1988) is a Barbadian R&B recording artist and model born in Saint Michael, Barbados.
              </p>
          </div>
          </div>
    <!--end galleryEntry-->
    
    
    <!--galleryEntry-->    
      <div class="galleryImage">
          <img src="images/image03.jpg"></img>
          <div class="info">  
              <h2>Black Eyed Peas</h2>
              <p>
                  The Black Eyed Peas is a Grammy Award winning hip hop group that formed in Los Angeles, California in 1995.
              </p>
          </div>
          </div>
    <!--end galleryEntry-->
    
    <!--galleryEntry-->    
      <div class="galleryImage">
          <img src="images/image04.jpg"></img>
          <div class="info">  
              <h2>Lady Antebellum</h2>
              <p>
                  Lady Antebellum is an American country music group formed in Nashville, Tennessee in 2006. 
              </p>
          </div>
          </div>
    <!--end galleryEntry-->
    
    <!--galleryEntry-->    
      <div class="galleryImage">
          <img src="images/image05.jpg"></img>
          <div class="info">  
              <h2>Lady Gaga</h2>
              <p>
                  Lady Gaga is an American recording artist who rose to fame with her first two singles "Just Dance" and "Poker Face".
              </p>
          </div>
          </div>
    <!--end galleryEntry-->
          
        
    <!--galleryEntry-->    
      <div class="galleryImage">
          <img src="images/image06.jpg"></img>
          <div class="info">  
              <h2>The Killers</h2>
              <p>
                  The Killers is an American rock band from Las Vegas, Nevada, formed in 2002 who have sold over 16 million records worldwide.
              </p>
          </div>
          </div>
    <!--end galleryEntry-->
              
          
      </div>
      
     
     
     </div>
     
      <p class="clear">
     <a href="http://www.addyosmani.com">
      Back to AddyOsmani.com
     </a>
     </p>
     
      </body>
    </html>
  • 相关阅读:
    PyCharm安装及其使用
    web端自动化——Selenium3+python自动化(3.7版本)-chrome67环境搭建
    Unittest单元测试框架
    selenium IDE下载安装(For Chrome and firefox)
    视频上传测试点
    web端自动化——自动化测试准备工作
    selenium3+Python3+sublime text3自动化登录
    Sublime Text3安装及常用插件安装
    web端自动化——selenium3用法详解
    Selenium2+python自动化2.7-火狐44版本环境搭建(转)
  • 原文地址:https://www.cnblogs.com/bober/p/3167462.html
Copyright © 2011-2022 走看看