zoomer.for.jquery 图片效果（缩小、放大）

zoukankan html css js c++ java

zoomer.for.jquery 图片效果（缩小、放大）

/Files/Snowfun/zoomer.for.jquery-1.0.zip

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
    <title>无标题页</title>
    <script type="text/javascript" language="javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="zoomer.css" media="screen" />
<meta http-equiv="Content-Language" content="fr" />

</head>
<body>
    <div id="page">
    <center>

    </center>
    <br><br><br>
        <div id="content">

        <div class="container">
            <ul class="thumb">
            <li><a href="#"><asp:Image ID="Image1" runat="server" ImageUrl="~/Img/IMG_9484.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image2" runat="server" ImageUrl="~/Img/IMG_9486.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image3" runat="server" ImageUrl="~/Img/IMG_9487.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image4" runat="server" ImageUrl="~/Img/IMG_9488.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image5" runat="server" ImageUrl="~/Img/IMG_9490.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image6" runat="server" ImageUrl="~/Img/IMG_9491.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image8" runat="server" ImageUrl="~/Img/IMG_9542.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image7" runat="server" ImageUrl="~/Img/IMG_9494.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image9" runat="server" ImageUrl="~/Img/IMG_9498.JPG"/></a></li>
            <li><a href="#"><asp:Image ID="Image10" runat="server" ImageUrl="~/Img/IMG_9499.JPG"/></a></li>
            </ul>
        </div>

    </div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>
</body>
</html>

ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 500px;background-color: white;}
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 77px;}
ul.thumb li img {width: 100px; height: 67px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;background:url(thumb_bg.png) no-repeat center center;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(blue.png) no-repeat center center;padding:17px 0 0 0;text-align:center; color: #fff; }

(function($)
{$.fn.Zoomer=function(b)
    {var c=$.extend({speedView:200,speedRemove:400,altAnim:false,speedTitle:400,debug:false},b);
    var d=$.extend(c,b);

    function e(s)
    {if(typeof console!="undefined"&&typeof console.debug!="undefined")
        {console.log(s)}
        else{alert(s)}}
     if(d.speedView==undefined||d.speedRemove==undefined||d.altAnim==undefined||d.speedTitle==undefined){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle);return false}
     if(d.debug==undefined){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle);return false}if(typeof d.speedView!="undefined"||typeof d.speedRemove!="undefined"||typeof d.altAnim!="undefined"||typeof d.speedTitle!="undefined")
     {if(d.debug==true){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle)}
     $(this).hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-110px',marginLeft:'-77px',top:'50%',left:'50%','500px',height:'335px',padding:'20px'},d.speedView);

//     if(d.altAnim==true)
//     {var a=$(this).find("img").attr("alt");
//         if(a.length!=0)
//         {$(this).prepend('<span class="title">'+a+'</span>');
//            $('.title').animate({marginLeft:'-42px',marginTop:'90px'}
//            ,d.speedTitle).css({'z-index':'10','position':'absolute','float':'left'}
//            )}}

            },function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0','100px',height:'67px',padding:'5px'},d.speedRemove);$(this).find('.title').remove()})}}})(jQuery);

http://www.iteye.com/news/23754

查看全文

相关阅读:
Hadoop集群(三) Hbase搭建
 Hadoop集群(二) HDFS搭建
 Hadoop集群(一) Zookeeper搭建
 Redis Cluster 添加/删除完整折腾步骤
 Redis Cluster在线迁移
 Hadoop分布式HA的安装部署
 Describe the difference between repeater, bridge and router.
what is the “handover” and "soft handover" in mobile communication system?
The main roles of LTE eNodeB.
The architecture of LTE network.

原文地址：https://www.cnblogs.com/Snowfun/p/2439033.html