一款图片放大显示效果，很简单实用 -网站应用-网维者博客

一款图片放大显示效果，很简单实用

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Tools standalone demo</title>
  <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
  <!-- standalone page styling (can be removed) -->
  <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>  
  <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
  
  <style>
  
  /* black version of the overlay. simply uses a different background image */
  div.apple_overlay.black {
    background-image:url(upload/201101251005202466.png);    
    color:#fff;
  }
  
  div.apple_overlay h2 {
    margin:10px 0 -9px 0;
    font-weight:bold;
    font-size:14px;
  }
  
  div.black h2 {
    color:#fff;
  }
  
  #triggers {
    margin-top:10px;
    text-align:center;
  }
  
  #triggers img {
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    margin:2px 5px;
    cursor:pointer;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
  }
  </style>
  <!--[if lt IE 7]>
  <style> 
  div.apple_overlay {
    background-image:url(upload/201101251005213106.gif);
    color:#fff;
  }
  
  /* default close button positioned on upper right corner */
  div.apple_overlay div.close {
    background-image:url(upload/201101251005216037.gif);
  
  }  
  </style>
  <![endif]-->
</head>
<body>
<!-- trigger elements -->
<div id="triggers">
  <img src="http://www.icafer.com/upload/201101251005227157.jpg" rel="#photo1"/>
  <img src="http://www.icafer.com/upload/201101251005236547.jpg" rel="#photo2"/>
</div>
<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
  <img src="http://www.icafer.com/upload/201101251005230237.jpg" />
  <div class="details">
    <h2><a href="http://www.websjy.com">Berlin Gustavohouse</a></h2>
    <p>
      The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
      1998 by the Spanish artist Gustavo.
    </p>
  </div>
</div>
<div class="apple_overlay" id="photo2">
  <img src="http://www.icafer.com/upload/201101251005281224.jpg" />
  <div class="details">
    <h2><a href="http://www.websjy.com">Berlin Alexanderplatz Station</a></h2>
    <p>
      Berlin Alexanderplatz is a railway station in the Berlin city centre and is one
      of the city's most important interchange points for local public transport.
    </p>
  </div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
  $("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
</body>
</html>
网维者博客

一款图片放大显示效果，很简单实用

[ 网站应用 ]分类相关文章：
