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

查看全文

相关阅读:
mysql 触发器
 监听mac价格变动，降价了就通知。
mysql 索引、约束
 mysql 三种insert插入语句
 idea 控制台中文乱码
 go 刷算法第三题——二叉树根节点到叶子节点和为指定值的路径
 mysql 排序序号sql+斐波那契统计
 go 刷算法第二题——最长回文子串
 常见排序算法-基数排序、计数排序
 常见排序算法-选择、冒泡排序

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