简单图片放大效果

在今天我创造了一个小的代码段在JQuery,这次是关于图像缩放盘旋,这种特征可能适合一个网络摄影展,现场有许多内容,给一个小快速预览关于该物品。

JQuery Image Zoom Hover

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Zoom Hover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var cont_left = $("#container").position().left;
        $("a img").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height: "250",
                "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "150",
                 "150",
                left: "+=50",
               top: "+=50"
            }, "fast");
        });

        $(".img").each(function(index) {
            var left = (index * 160) + cont_left;
            $(this).css("left", left + "px");
        });
    });
    </script>
    <style type="text/css">
        #container {
            text-align: center;
            position: absolute;
            left: 260px;
            margin-top: 150px;
            width: 790px;
        }
        .img {
            position: fixed;
            z-index: 0;
        }
        .end {
            margin-right: 0;
        }
        .clear {
            clear: both;
        }
        .img a img {
            position: relative;
            border: 0 solid #fff;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="img"><a href="#"><img src="img/1.jpg"/></a></div>
        <div class="img"><a href="#"><img src="img/2.jpg"/></a></div>
        <div class="img"><a href="#"><img src="img/3.jpg"/></a></div>
        <div class="img"><a href="#"><img src="img/4.jpg"/></a></div>
        <div class="img end"><a href="#"><img src="img/5.jpg"/></a></div>
        <div class="clear"></div>
    </div>
</body>
</html>

相关阅读:
MySQL 数据库中 ceil()、floor()、round()、trunc() 函数用法
BUG 的几种状态
MySQL 数据库基本知识点
测试用例设计方法之等价类和边界值
时间同步（NTP/PTP）技术原理介绍
智慧校园网络架设GPS北斗时钟同步系统
制药行业SCADA系统架设NTP时钟服务器（网络时间服务器）
关于M1 Mac如何设置打开终端的快捷键
关于M1Mac每次都要执行source ~/.bash_profile后，配置的环境变量才生效
关于Mac M1版安装中国蚁剑

原文地址：https://www.cnblogs.com/Jaylong/p/slide14.html